在元素后插入html代码

Question

我有一个看起来像这样的html文件：

...html code...
<ul id="my_ul">
...html code...

使用javascript，我想在<ul id="my_ul">之后立即在文档内部插入以下html代码：

<li><span>Some text</span><ul>

到目前为止，我有这个，但没有预期的结果。 拜托，我在做什么错？

var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var para3 = document.createElement("ul");
var element = document.getElementById("my_ul");
element.appendChild(para1);
element.appendChild(para2);
element.appendChild(para3);

Answer 1

像这样：

 var ul = document.getElementById("my_ul"); var li = document.createElement("li"); var span = document.createElement("span"); var text = document.createTextNode("Some text"); span.appendChild(text); li.appendChild(span); ul.appendChild(li); 

 <ul id="my_ul"> </ul> 

Answer 2

如果您想要较短的代码而不为每个html元素创建对象，请执行以下操作：

var element = document.getElementById("my_ul");
var html = '<li><span>Some text</span></li>'; 
element.innerHTML = html + element.innerHTML;

Answer 3

这是你想做的吗？

演示： 小提琴

var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
para1.appendChild(para2);
element = document.getElementById("my_ul");
element.appendChild(para1);

Answer 4

您的代码执行此操作：

 element.appendChild(para1); 

使列表项成为原始列表的子项

 element.appendChild(para2); 

将范围设为原始列表的子级

 element.appendChild(para3); 

使新列表成为原始列表的子列表

---

您需要将每个元素附加到要成为其父元素的元素上，而不是将所有内容都附加到原始列表中。

用适当的变量替换element 。

Answer 5

 $(document).ready(function(){ var para1 = document.createElement("li"); var para2 = document.createElement("span"); var node = document.createTextNode("Some text"); para2.appendChild(node); var element = document.getElementById("my_ul"); element.appendChild(para1); para1.appendChild(para2); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul id="my_ul"> </ul> 

Answer 6

var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var textNode = document.createTextNode("Some text");
span.appendChild(textNode);
li.appendChild(span);
ul.appendChild(li);