使用Javascript向页面添加几行HTML_Javascript_Html

使用Javascript向页面添加几行HTML

javascript html

使用Javascript向页面添加几行HTML,javascript,html,Javascript,Html,我有一个显示一些信息的HTML页面。在javascript中，我提交了一个var，如您在下面看到的，如果它满足某个条件，它将向我的HTML添加一行文本 <script type="text/javascript"> if (submitted == "yes") { document.write("<div>SHOW ONLY IF SUBMIITED</div>"); } </script> 如果（提交==“是”）{ 文

我有一个显示一些信息的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>


如果（提交==“是”）{
文件。填写（“仅在提交时显示”）；
}
表格标题
..... 剩下的html代码

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

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

您可以使用元素的

.innerHTML

属性

var submitted=“是”
var码=`
姓
姓名
`;
如果（提交==“是”）{
document.querySelector（“body”）.innerHTML+=代码
}

您可以使用元素的

.innerHTML

属性

var submitted=“是”
var码=`
姓
姓名
`;
如果（提交==“是”）{
document.querySelector（“body”）.innerHTML+=代码
}

您拥有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（“myDivID”）.innerHTML='namesGiven name'；
}

您拥有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（“myDivID”）.innerHTML='namesGiven name'；
}

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

innerHTML

属性来完成：

const buttonEl=document.querySelector（'htmlBtn'）；
const targetEl=document.querySelector（“#target”）；
设divId=0；
Buttonnel.addEventListener（'单击'，（e）=>{
//innerHTML是您希望使用的而不是document.write
targetEl.innerHTML+=`Added HTML${divId}`；
divId+=1；
});
基本上，您要做的是指定一个DOM元素，您可以将动态构建的HTML注入其中-您可以通过设置或附加到它的innerHTML
属性来完成：

const buttonEl=document.querySelector（'htmlBtn'）；
const targetEl=document.querySelector（“#target”）；
设divId=0；
Buttonnel.addEventListener（'单击'，（e）=>{
//innerHTML是您希望使用的而不是document.write
targetEl.innerHTML+=`Added HTML${divId}`；
divId+=1；
});


var submitted=“yes”；
函数showFormiFneed（）{
如果（提交==“是”）{
var form=document.getElementById（“myForm”）；
form.style.display=“block”；
}
}
#myForm{
显示：无；
}

姓
姓名

var submitted=“yes”；
函数showFormiFneed（）{
如果（提交==“是”）{
var form=document.getElementById（“myForm”）；
form.style.display=“block”；
}
}
#myForm{
显示：无；
}

姓
姓名
这里有一种方法，它使用javascript的“模板文字”语法——使用倒勾（`）——来封装标记

函数addStuff（）{
const formHTML=`
姓
姓名
`;
const newForm=document.createElement（“表单”）；
newForm.innerHTML=formHTML；
document.querySelector（“body”）.appendChild（newForm）；
}
#现有内容{
高度：50px；
宽度：400px；
利润率：10px；
填充：10px；
边框：1px纯色灰色；
}
将HTML附加到页面
现有内容
这里介绍了一种使用javascript的“模板文字”语法（使用倒勾（`）来封装标记的方法

函数addStuff（）{
const formHTML=`
姓
姓名
`;
const newForm=document.createElement（“表单”）；
newForm.innerHTML=formHTML；
document.querySelector（“body”）.appendChild（newForm）；
}
#现有内容{
高度：50px；
宽度：400px；
利润率：10px；
填充：10px；
边框：1px纯色灰色；
}
将HTML附加到页面
现有内容
我已经了解了该文档。编写不是执行此操作的适当方法
--为什么您已经了解了这一点？您不能只执行文档。多次编写
？或者在文档中写入多行代码？如果只在页面上包含div，然后有条件地更改其可见性，会怎么样？这就是为什么：如果你通读了这些问题/答案，你就会注意到你可以使用的所有其他选项。innerHTML
或insertAdjacentHTML
都不起作用吗？我开始理解那个文档了。写不是做这个的合适方法
——为什么你开始理解它了？你能不能不只是做文档。写多次？或者在文档中写入多行代码？如果只在页面上包含div，然后有条件地更改其可见性，会怎么样？这就是为什么：如果你通读了这些问题/答案，你就会注意到你可以使用的所有其他选项。innerHTML
或insertAdjacentHTML
都不起作用吗？这给了我一个