使用 Javascript 向页面添加几行 HTML答案

【问题标题】：Adding several lines of HTML to page using Javascript使用 Javascript 向页面添加几行 HTML
【发布时间】：2019-06-27 15:46:03
【问题描述】：

我有一个显示一些信息的 HTML 页面。在 javascript 中，我提交了一个 var，如下所示，如果满足特定条件，它将在我的 HTML 中添加一行文本。

<script type="text/javascript">
if (submitted == "yes") {       
    document.write("<div>SHOW ONLY IF SUBMIITED</div>");
}
</script>

问题是，我想在我的页面中添加几行 HTML 代码，我开始明白 document.write 不是执行此操作的合适方法。然而，我发现的每一个替代方案似乎都不适合我。

这是我要添加的 HTML 的 sn-p：

<form>
<table>
    <tr>
        <td>Surname</td>
        <td>Given name</td>
    </tr>
    <tr>
         <td><input type="text" name="ln" value=""/></td>
         <td><input type="text" name="gn" /></td>
    </tr>
</table>
</form>

完整的代码要长得多。

我的页面：

<script type="text/javascript">
if (submitted == "yes") {       
    document.write("<div>SHOW ONLY IF SUBMIITED</div>");
}
</script>
<body>
<div class="Title" style="display:block; width=100%;">
    <h1>FORM TITLE</h1>
</div>
     <div id="injecthere"></div>

..... the rest of my html code
</body>

代码需要在页面加载时注入，而不是通过用户的任何输入（无按钮等）

如何在没有 jQuery 的情况下将我的代码添加到我的 HTML 页面（仅限基本 java）？

【问题讨论】：

I've come to understand that document.write is not the appropriate method to do this -- 你为什么会明白这一点？
你能不能不只是多次document.write？还是document.write里面，有多行代码？
如果您只是在页面上包含 div，然后有条件地更改其可见性怎么办？ stackoverflow.com/a/3961649/102937
这就是为什么：stackoverflow.com/questions/4537963/…
如果您仔细阅读了该问题/答案，您将注意到您可以使用的所有其他选项。 innerHTML 或 insertAdjacentHTML 都不工作吗？

标签： javascript html

【解决方案1】：

你可以使用元素的.innerHTML属性

var submitted="yes"
var code=`<form>
<table>
<tr>
<td>Surname</td>
<td>Given name</td>
</tr>
<tr>
<td><input type="text" name="ln" value=""/></td>
<td><input type="text" name="gn" /></td>
</tr>
</table>
</form>`;
if (submitted == "yes") {       
    document.querySelector("body").innerHTML+=code
}

&lt;body&gt;&lt;/body&gt;

【讨论】：

这给了我一个错误：Uncaught TypeError: Cannot set property 'innerHTML' of null
你能显示你要附加的html元素吗
确实如此！我将如何格式化它以使其可读，因为我有几行代码我不想压缩成一行？

【解决方案2】：

这是一种使用 javascript 的“模板文字”语法的方法——使用反引号 (`)——将你的标记括起来。

function addStuff(){
  const formHTML = `
    <table>
      <tr>
        <td>Surname</td>
        <td>Given name</td>
      </tr>
      <tr>
        <td><input type="text" name="ln" value=""/></td>
        <td><input type="text" name="gn" /></td>
      </tr>
    </table>`;
  const newForm = document.createElement("form");
  newForm.innerHTML = formHTML;
  document.querySelector("body").appendChild(newForm);
}

#existing-content { 
  height: 50px; 
  width: 400px; 
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
}

<button onclick="addStuff()">Append HTML to Page</button>
<div id="existing-content">Existing content</div>

如果您想支持不支持模板字面量的浏览器，您最终可能会使用 createElement（和/或 createTextNode）和 appendChild 的繁琐迭代，将每个节点添加到 DOM时间，从嵌套最深的元素开始，逐步解决。

如果由于某种原因您的页面没有 body 元素，这将有助于找到将新标记附加到的元素：
document.querySelector("#existingContent").parentNode.appendChild(newForm);

【讨论】：

【解决方案3】：

基本上，您要做的是指定一个 DOM 元素，您可以将动态构建的 HTML 注入其中 - 您可以通过设置或附加到它的 innerHTML 属性来做到这一点：

const buttonEl = document.querySelector('#htmlBtn');
const targetEl = document.querySelector('#target');
let divId = 0;
buttonEl.addEventListener('click', (e) => {
  //innerHTML is what you want to use instead of document.write
  targetEl.innerHTML += `<div id=dynamic-html-${divId}>Added HTML  ${divId}</div>`;
  divId += 1;
});

<input id="htmlBtn" type="button" value="Add some HTML to the DOM" />
<div id="target"></div>

【讨论】：

【解决方案4】：

你有 js 属性 innerHTML。所以它看起来像：

<script type="text/javascript">
  if (submitted == "yes") {       
    document.getElementByID("myDivID").innerHTML = '<form><table><tr><td>Surname</td><td>Given name</td></tr><tr><td><input type="text" name="ln" value=""/></td><td><input type="text" name="gn" /></td></tr></table></form>';
  }
</script>
<div id="myDivID"></div>

【讨论】：

这给了我一个错误； document.getElementByID 不是函数

【解决方案5】：

var submitted = "yes";

function showFormIfNeeded() {
  if (submitted === "yes") {
    var form = document.getElementById("myForm");
    form.style.display = "block";
  }
}

#myForm {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body onload="showFormIfNeeded()">
  <form id="myForm">
    <table>
      <tr>
        <td>Surname</td>
        <td>Given name</td>
      </tr>
      <tr>
        <td><input type="text" name="ln" value="" /></td>
        <td><input type="text" name="gn" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

试试这个

【讨论】：

这并不能真正解决我的问题。我不希望显示该按钮，除非 submit = yes 这让我回到了我最初遇到的同样问题，我不能使用 document.write 来注入 html 代码，只能使用文本。
你什么时候想检查提交的==“是”？页面加载时？
没错，是url通过POST获取的变量