将带有纯文本的 html 代码作为属性值放置是一个好习惯吗？
[英]Is it a good practice to put html code with plain text as a value of an attribute?
问题描述
Is it considered a good or a bad practice to put text and html code as a value of an attribute, here is an example :
将文本和 html 代码作为属性的值被认为是好还是坏的做法，这里是一个例子：
<script>
var name = '<h3>name</h3>Here goes a description about the name attribute';
var elem = document.getElementById('monElem');
elem.innerHTML = name;
</script>
knowing the fact that the text between html tags is a static text not a dynamic one.知道 html 标签之间的文本是静态文本而不是动态文本这一事实。 If it is a bad practice then is the solution to use a template engine ?如果这是一个不好的做法，那么使用模板引擎的解决方案是什么？
3 个解决方案
解决方案1
0 2015-10-31 22:52:28
Unless you are using this code to generate a lot of DOM content, ie execute it a few hundred or thousand times, you'll be good.除非您使用此代码生成大量DOM 内容，即执行数百或数千次，否则您会很好。
Just for completeness I'd like to mention that there's a few other ways of generating HTML content from Javascript:为了完整起见，我想提一下，还有其他几种从 Javascript 生成 HTML 内容的方法：
- document.createElement 文档.createElement
- document.createDocumentFragment document.createDocumentFragment
-
<template>element<template>元素
The performance of these three is generally higher than using innerHTML , but the differences between the three are currently pretty inconsistent between browsers and browser versions.这三者的性能普遍高于使用innerHTML ，但目前三者之间的差异在浏览器和浏览器版本之间相当不一致。
Also, <template> isn't fully supported in all browsers yet and won't be supported in older browsers.此外， <template>尚未在所有浏览器中得到完全支持，旧浏览器也不支持。
解决方案2
0 2015-10-31 23:35:42
If the purpose is to show/hide this static HTML on demand, then it might be even better not to dynamically add and remove it from your HTML document, but to show/hide it via CSS :如果目的是按需显示/隐藏此静态HTML ，那么最好不要在HTML文档中动态添加和删除它，而是通过CSS显示/隐藏它：
<body>
<div id="hoverMe" onmouseout="showHelp(0)" onmousemove="showHelp(1)">
Hover me to learn about "name"
</div>
<div id="monElem" style="display:none">
<h3>name</h3>
Here goes a description about the name attribute
</div>
</body>
<script>
var elem = document.getElementById('monElem');
function showHelp(show) {
elem.style.display = show ? '' : 'none';
}
</script>
This will also have better performance than adding the elements to the DOM at the moment of need.这也将比在需要时将元素添加到 DOM 具有更好的性能。
解决方案3
-1 2015-10-31 22:53:23
It depends on styleguide in your team, but in most cases it's a bad practice.这取决于您团队中的风格指南，但在大多数情况下，这是一种不好的做法。
The better solution is when you'll create new element throught javascript:更好的解决方案是当您通过 javascript 创建新元素时：
var h3 = document.createElement("h3");
var text = document.createTextNode("Any name … .");
h3.appendChild(text);
var elem = document.getElementById('monElem');
elem.insertBefore(h3, elem.firstChild);
Why is it better?为什么更好？ Just because it's faster, more conviniet and predictable.只是因为它更快、更方便、更可预测。
Read more about document methods on w3schools .在 w3schools 上阅读有关文档方法的更多信息。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.