本文目录一览：
求助如何使用js向div追加html代码
!DOCTYPE html
html
head
script src=”jquery.js”/script
div id=”dictionary”
/div
div class=”letters”
div class=”letter” id=”letter-a”
h3a href=”entries-a.html”A/a/h3
/div
div class=”letter” id=”letter-b”
h3a href=”entries-a.html”B/a/h3
/div
div class=”letter” id=”letter-c”
h3a href=”entries-a.html”C/a/h3
/div
div class=”letter” id=”letter-d”
h3a href=”entries-a.html”D/a/h3
/div
!– and so on —
/div
/head
body
script
$(document).ready(function() {
$(‘#letter-c a’).click(function(event) {
event.preventDefault();
$.getScript(‘c.js’);
});
});
/script
/body
/html
将写好的c.js文件放置同一个目录下面
var entries = [
{
“term”: “CALAMITY”,
“part”: “n.”,
“definition”: “A more than commonly plain and…”
},
{
“term”: “CANNIBAL”,
“part”: “n.”,
“definition”: “A gastronome of the old school who…”
},
{
“term”: “CHILDHOOD”,
“part”: “n.”,
“definition”: “The period of human life intermediate…”
}
//省略的内容
];
var html = ”;
$.each(entries, function() {
html += ‘div class=”entry”‘;
html += ‘h3 class=”term”‘ + this.term + ‘/h3’;
html += ‘div class=”part”‘ + this.part + ‘/div’;
html += ‘div class=”definition”‘ + this.definition + ‘/div’;
html += ‘/div’;
});
$(‘#dictionary’).html(html);
//$(‘#dictionary’).append(html);
这里的$(‘#dictionary’).html(html);可以直接将需要的代码放入到指定的div内 (div id=”dictionary”)
也可以通过$(‘#dictionary’).append(html);将代码附加到指定的div内 (div id=”dictionary”)
JS如何在页面中插入HTML代码
步骤
1、新建一网页文件“sample.html”,用记事本或其它文本编辑软件（如UltraEdit）打开，输入如图所示的HTML代码。该网页文件包括一个蓝色的字符串，一个按钮和一个文本框。
2、JS代码可插入到”head”标签之间。编写Javascript代码，代码内容如图所示，并将该段代码复制到网页文件”sample.html“中标签”head”和“/head之间，然后查看网页文件的显示内容。
如何在 JS 中嵌入 HTML 代码
思路，在JS中定义要嵌入的html代码，然后通过js进行嵌入即可。
html
head
script
function insert(){
‘定义代码
var insertText = “tabletrtdany thing/td/tr/table”;
’从html的标签中取得要插入的id进行innerHTML
document.getElementById(“insert”).innerHTML = document.getElementById(“insert”).innerHTML+insertText;
}
/script
/head
body
button onclick=”insert()”Insert/button
div id=”insert”/div
/body
/html
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
如：div id=”aa”这是内容/div ，可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。
使用js向网页中写入html内容
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]
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270852.html
微信扫一扫 
支付宝扫一扫 