Question

我有一个显示一些信息的HTML页面。在javascript中，我提交了一个var，如您在下面看到的那样，如果满足一定条件，则会在HTML中添加一行文本。

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

事实是，我想在页面上添加几行HTML代码，并且我逐渐了解到document.write不是执行此操作的适当方法。但是，我发现的所有替代方法似乎都不适合我。

以下是我要添加的HTML的摘要：

<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）？

Answer 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
}

<body></body>

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

Answer 3

您拥有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>

Answer 4

基本上，您要做的就是指定一个DOM元素，您可以将其动态生成的HTML注入其中-您可以通过设置或附加其input.ScreenPosition.xy /= input.ScreenPosition.w; float2 UV = 0.5f * (float2(input.ScreenPosition.x, -input.ScreenPosition.y) + 1)属性来实现：

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

Answer 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>

尝试一下

使用Javascript向页面添加几行HTML

5 个答案: