Firefox插件:插入大量HTML的最佳方式是什么?
Firefox Addon: What is the best way to insert a large chunk of HTML?
虽然createElement()
和appendChild()
是首选的方法,但对于大块的HTML来说,它可能会变得繁琐。
下面是一个例子:
<input type="button" name="addbbcode16" id="addbbcode16" value="Quote=" onclick="bbstyle(16)" class="first-button" />
<input type="button" value="RemoveTag" onclick="makeChange('remove')" />
<input type="button" value="toLower" onclick="makeChange('lower')" />
<input type="button" value="toUpper" onclick="makeChange('upper')" />
<input type="button" value="TitleCase" onclick="makeChange('titlecase')" class="last-button" />
<br style="clear: both;" />
<input type="button" accesskey="b" name="addbbcode6" id="addbbcode6" value="B" onclick="bbstyle(6)" style="font-weight: bold;" class="first-button" />
<input type="button" accesskey="i" name="addbbcode8" id="addbbcode8" value="i" onclick="bbstyle(8)" style="font-style: italic;" />
<input type="button" accesskey="u" name="addbbcode10" id="addbbcode10" value="u" onclick="bbstyle(10)" style="text-decoration: underline;" />
<input type="button" accesskey="l" name="addbbcode12" id="addbbcode12" value="List" onclick="bbstyle(12)" />
<input type="button" accesskey="o" name="addbbcode14" id="addbbcode14" value="List=" onclick="bbstyle(14)" class="last-button" />
Font colour:
<select name="addbbcode18" onchange="makeChange('[color=' + this.form.addbbcode18.options[this.form.addbbcode18.selectedIndex].value+ ']', '[/color]'); this.selectedIndex=0;">
<option value="#">Default</option>
<option style="color: darkred;" value="darkred">Dark Red</option>
<option style="color: red;" value="red">Red</option>
<option style="color: orange;" value="orange">Orange</option>
<option style="color: brown;" value="brown">Brown</option>
<option style="color: yellow;" value="yellow">Yellow</option>
<option style="color: green;" value="green">Green</option>
<option style="color: olive;" value="olive">Olive</option>
<option style="color: cyan;" value="cyan">Cyan</option>
<option style="color: blue;" value="blue">Blue</option>
<option style="color: darkblue;" value="darkblue">Dark Blue</option>
<option style="color: indigo;" value="indigo">Indigo</option>
<option style="color: violet;" value="violet">Violet</option>
<option style="color: white;" value="white">White</option>
<option style="color: black;" value="black">Black</option>
</select>
Font size:
<select name="addbbcode20" onchange="makeChange('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;">
<option value="7">Tiny</option>
<option value="9">Small</option>
<option value="12" selected="selected">Normal</option>
<option value="18">Large</option>
<option value="24">Huge</option>
</select>
有其他选择吗?
它可以制作成XUL文档/片段并插入吗?
我知道有些部分可以用循环来创建。不希望使用innerHTML
除了实际生成动态代码(使用一些循环)或使用.innerHTML
(不是性能方面的最佳想法,也容易出现安全漏洞,因此不建议使用)之外,还可以将其制作成XHTML XML文档:
- 将其作为有效的XHTML或XUL(或混合;命名空间,耶)片段(XML文档)。
- 使用XHR或DOMParser将其解析为DOM。
-
.importNode
或.adoptNode
(深)到目标文档 - 使用正常的DOM API (
.appendChild
,.insertBefore
)插入导入/采用的节点
相关文章:
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 为react组件传递道具的最佳方式
- 让Webpack管理Quirky AMD定义的最佳方式
- 在承诺链中处理早期回报的最佳方式
- 在ng重复循环中显示条件内容的最佳方式是什么
- 在phonegap中为android调用onload函数的最佳方式
- 链接两个网页或网络应用程序的最佳方式
- 什么's是连接供应商js文件的最佳方式
- 什么's是在javascript中迭代项的最佳方式
- 在node.js中编写单元测试的最佳方式是什么
- 在页面上记录数据并实现pushstate()的最佳方式
- 使用AJAX在Rails中提交动态表单的最佳方式是什么
- 什么'这是加载jQuery的最佳方式
- 将大数组(字符串和类型数组的混合物)存储到blob或文件中/从blob或文件检索大数组的最佳方式
- 在网站上显示.mov作为加载屏幕的最佳方式
- 使用Angular存储用户以前是否选中过复选框,然后再调用它的最佳方式是什么
- 以角度渲染表中数据的最佳方式
- 删除集合中旧邮件/帖子的最佳方式
- 显示全屏Ajax加载程序的最佳方式
- PHP和JS中表单验证的最佳方式