将html代码转换为javascript用于动态输入

我试图将这段html代码转换为javascript，以便我可以动态地将它添加到html代码中的<div>。将html代码转换为javascript用于动态输入

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

来源

2012-02-10 Vikram Nair

为什么它不起作用？有没有JavaScript错误？生成的html有什么问题吗？请给我们更多的信息来帮助 – 2012-02-10 16:43:47

不是一个答案，但需要考虑的是可以使用JS模板引擎：http://stackoverflow.com/questions/7788611/what-javascript-template-engines-you-recommend 。在构建HTML时，比手动将DOM节点或文本串起来要少得多。干杯。 – artlung 2012-02-10 16:46:31

您没有div1 ID的元素。坚持一个在那里，它工作正常。否则，你会得到一个“Can not call method”appendChild'null“错误。 – j08691 2012-02-10 16:47:34

您从未追加过div1元素。

其他一些问题：

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

来源

2012-02-10 16:44:07

的语法可以是：

a.className = "circle";

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

切勿混用和-比赛。

您还在省略设置a标记的href属性。

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

来源

2012-02-10 16:44:04

请使用var当你声明一个新变量:)

工程确定为我提供已经是div有与div1 ID。

See this fiddle

虽然也请注意什么罗布和Kolink已经注意到你的属性/类等

来源

2012-02-10 16:47:10

您只需创建所需的HTML代码的字符串和添加到作为一个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; 
};

来源

2012-02-10 16:48:11 karora

感谢大家，我实施了所有的建议，它工作得很好！再次谢谢你！ – 2012-02-11 15:05:09

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

来源

2012-02-10 16:48:57 JoshNaro

将html代码转换为javascript用于动态输入

回答

相关问题