使用javascript动态制作Html页面答案

【问题标题】：Make Html page using javascript dynamically使用javascript动态制作Html页面
【发布时间】：2015-07-09 05:04:07
【问题描述】：

我浏览了以下链接

How can I make JavaScript make (produce) new page?

Create and append dynamically

我想在 div 中使用 JavaScript 动态添加 html 元素，但我不想关注第二个链接，因为我的 javascript 代码会变得非常庞大和复杂。有没有办法让我可以像第一个链接中那样使用一行代码添加 html 元素。

我不想使用 JQuery。

【问题讨论】：

标签： javascript html css

【解决方案1】：

首先我要说的是，使用 jQuery。如果你使用 jQuery，你实际上只需要这样做：

$("#target").append("<p>New Paragraph</p>");

如果你坚持使用 vanilla JavaScript，你将不得不像你发布的第二个例子那样做：

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

【讨论】：

【解决方案2】：

我想说的你可以这样使用

var element = document.getElementsByTagName("body"); // Pick your element here as per need.

var attach_elem = "<div><p> hi creatig the p tag </p> <span>  hi creatig the span tag </span><div></div></div>"; //prepare element which you want to be in your html page.

element.write(attach_elem); // just pass the variable (want to attach in html).


//Or you can use the below code.

element.innerHTML = attach_elem; // pass variable as innerhtml to the selected element.

【讨论】：

【解决方案3】：

这是您可以拥有的最简单的选项

   <script>
    var htmlcontent = "<h1>Header</h1><p>This is some dynamically loaded content assigned using javascript</p>"
    document.getElementById("content").innerHTML = htmlcontent;
   </script>

【讨论】：