Question

我正在尝试将这段HTML代码转换为javascript，以便我可以将其动态添加到html代码中的<div>。

The html code is
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Filename</h2>
<ul>
<li><a href="#">Add</a></li>
</ul>

我需要将此代码转换为javascript。我尝试这样做，但它似乎不起作用：

div1 = document.getElementById('div1');
a = document.createElement('img');
a.setAttribute('src','images/bg_shop.png');
a.setAttribute('alt','');
a.setAttribute('width','199');
a.setAttribute('height','199');
a.setAttribute('className','circle');

b=document.createElement('a');
b.setAttribute('className','icon');

c=document.createElement('h2');
c.value="filename";
c.name="filename";
c.id ="filename";

d=document.createElement('ul');
d.innerHTML="<li><a href='#'>add</a></li>"

div1.appendChild(a);
div1.appendChild(b);
div1.appendChild(c);
div1.appendChild(d);

Answer 1

您从未附加div1元素。

其他一些问题：

className是属性，不是属性。如果要设置属性，请改用普通class。
您的h2元素正在接收name，id和value属性。这些属性毫无意义。你的意思是：
```
h2.textContent = "filename"; //innerText for IE
```
最后，您尚未声明变量。有些浏览器拒绝为不存在的变量赋值。变量由var关键字声明：
```
var div1 = ...
```

Answer 2

语法是：

a.className = "circle";

或的

a.setAttribute("class","circle");

永远不要混淆。

您还省略了设置href代码的a属性。

为什么要在value上设置name，id或h2？你看到<h2 value="filename" name="filename" id="filename" />了吗？当然不是。使用c.innerHTML = "Filename";或“正确”方式：c.appendChild(document.createTextNode("Filename"));

Answer 3

声明新变量时请使用var：）

对我来说没问题，前提是div的ID为div1。

See this fiddle

虽然请注意Rob和Kolink关于你的属性/类等设置的注意事项。

Answer 4

您可以创建所需html代码的字符串，并将其添加为父div的html属性。这是简单的模板，在大多数情况下可以很好地工作。

只有在需要在运行时编辑某些属性时，才应采用您正在采用的方法。对于静态代码，不需要采用这种复杂的方法。

function htmlToBeRendered() {
    var html =
         "<img src=\"images\\bg_fav.png\\" alt=\"\" width=\"199\" height=\"199\" class=\"circle\"/>" +
         "<a href=\"#\" class=\"icon\"></a>" +
         "<h2>Filename</h2>" +
         "<ul>" +
             "<li><a href=\"#\">Add</a></li>" +
         "</ul>";
    return html;
};

Answer 5

您是否尝试使用http://getfirebug.com/等开发工具进行调试？您的页面中是否有ID为“div1”的元素？

将html代码转换为javascript以进行动态输入

5 个答案: