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

这是你想要做的吗？

演示：Fiddle

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);

在元素后插入html代码

6 个答案: