Javascript 由outerHTML更改的返回元素

我通过

var element = document.createElement(null);
document.body.appendChild(element);

之后，使用outerHTML修改元素

element.outerHTML = "<div> hello there </div>";

element.outerHTML=“你好”；

元素显示正确。然而，变量本身“元素”并不以任何方式反映变化。检索特定元素的唯一方法似乎是执行以下操作

element.outerHTML = "<div id='hi'> hello there </div>";
element = document.getElementById("hi");

element.outerHTML=“你好”；
元素=document.getElementById（“hi”）；

---

看起来很丑。有没有更好的方法和/或我遗漏了什么？

考虑下面的片段：

var-element=document.createElement（null）；
控制台日志（元素）；
document.body.appendChild（元素）；
控制台日志（元素）；
element.outerHTML=“你好”；
控制台日志（元素）；
元素=document.getElementById（“hi”）；
控制台日志（元素）

@Quentin你说得对，我本来没有提供更好的解决方案，所以我更新了我的答案。抱歉耽搁了！谢谢当然，使用innerHTML更容易，在某种程度上更优雅。然而，我有几个场景，在这些场景中，围绕我注入的html包装任何东西都会导致布局问题。更具体地说，我所有的HTML代码片段都已经包含了一个…，使用innerHTML可以让我达到…@resle我想你刚才解释的是解决这个问题所需要的更大图景的一部分。你能用一种简单的方式描述一下你想要完成什么吗？您是在尝试更改现有元素的内容还是在尝试添加新元素？我有一个元素库，如果您愿意，可以将它们称为“模板”，存储在字符串中。我需要编写一个函数，该函数采用这样的模板之一（例如…），基于此字符串创建一个新元素，将其附加到DOM并返回元素以供进一步操作，谢谢。但是，它应该是element=element.firstElementChild；我们有了一个全新的方法，而且很好的替代品可能会更干净。（将新元素包装在off-doc div中，将其innerHTML设置为所需的，然后用off-doc div的内容替换旧的

）。