如何在 JS 中嵌入 HTML 代码

如何在 JS 中嵌入 HTML 代码,第1张

javaScript 方法通过onclick事件触发

嵌入javaScript有两种书写方式:

1、内部js

1.1在script中编写

<script type="text/javascript">

function showOutter(){

// 通过id,获得输入内容

var content = document.getElementById("content").value

alert(content)

}

</script>

</head>

<body>

<input type="text" id="content" />

<input type="button" value="d出" onclick="showOutter()"/>

</body>

1.2直接写在标签

<body>

<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>

</body>

2、外部js

只需在外部建立.js格式文档,将1.1<script>标签之间的代码写入.js文件中。然后

<head>

<script type="text/javascript" src='../**.js'></script>

</head>

<body>

<input type="text" id="content" />

<input type="button" value="d出" onclick="showOutter()"/>

</body>

js可以向网页中写入html内容,方法是调用write方法向document的节点中写入html元素

以下展示两个实例

1.在网页上写入一个标题为hello的元素

效果如图:

2.在网页上写入一个九九乘法表

在js中可以使用上面的 <h1>hello </h1>这样的开始标签和闭合标签在一起的标签写法,也可以将开始标签和闭合标签分开来写,例如本例。

本例的逻辑是用table标签建立一个表,然后用for循环分别计算九九乘法的结果,在写入结果的前后用tr标签形成一行,计算结果的时候用td标签形成一列

效果图:

通过chrome浏览器右键检查,可以看到的确写入了一个九九乘法表的table到网页中

注意:

在进行字符串拼接的时候如果没有处理好,会出现 SyntaxError: missing ) after argument list 的错误,需要谨慎对待,具体问题具体对待,解决方法可以参考下面的资料或者自行google

1. SyntaxError: missing ) after argument list

2. js中出现missing ) after argument list

3. JavaScript: SyntaxError: missing ) after argument list [closed]

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。\x0d\x0a1、用innerHTML写入html代码:\x0d\x0a\x0d\x0adocument.getElementById("abc").innerHTML="要写入的文字或内容"\x0d\x0a2、appendChild() 方法:\x0d\x0aCoffeeTea\x0d\x0a点击向列表添加项目\x0d\x0a\x0d\x0afunction myFunction(){\x0d\x0avar node=document.createElement("LI")\x0d\x0avar textnode=document.createTextNode("Water")\x0d\x0anode.appendChild(textnode)\x0d\x0adocument.getElementById("myList").appendChild(node)\x0d\x0a}\x0d\x0a 回答于 2022-12-14


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7058454.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-01
下一篇2023-04-01

发表评论

登录后才能评论

评论列表(0条)

    保存