JavaScript 中将字符串转换为 HTML
在 JavaScript 中，一些特定的约定使整体开发历史提前一步被集成。同样，寻址字符串的一种非静态方法（以 HTML 元素捐赠模式的形式），然后将其作为唯一的对象传递给 HTML 主体。
这使界面动态化，并且可以解决许多原本很难调用的问题。
以下内容中的代码示例将演示如何实现这种转换。首先，我们将传递带有 innerHTML 属性的字符串。
在下一个示例中，我们将使用 DOM parse 方法。大多数情况下不鼓励这种约定，因为它存在许多浏览器接受的问题。
在最后一节中，我们将检查我们传递的字符串是 HTML 对象还是只是字符串。让我们潜入吧！
在这里，我们将有一个函数 stringToHTML，它将原始字符串作为其参数。之后，我们将创建一个 div，并希望传递其中给出的字符串。
我们也可以将它传递给 HTML 正文，但为了简洁起见，我们需要一个 div 元素。
接下来，新创建的 div 将与实例 dom 相关联（假设）。因此，对于 dom，我们将设置 innerHTML 属性，然后传递字符串。
return 将是我们创建的函数 stringToHTML 的 dom 实例。让我们检查一下代码行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="abc.js"></script>
</body>
</html>
var stringToHTML = function (str) {
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
输出：
DOMParser() 通常被忽略或可以与条件一起使用。如果先前处理问题的方法被取消，那么这段代码可能会触发以备份该过程。
所以在这里，我们将取一个 DOMParser() 接口的实例，该实例将由 parseFromString() 触发。参数将是字符串和它应该表示的 HTML 类型。
然后我们将实例 doc 传递给 HTML 正文。
代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="2.js"></script>
</body>
</html>
var stringToHTML = function (str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>I am fine Thank you! ^_^</p>'));
输出：
在本节中，我们将确定总体任务。我们将检查是否生成了 HTML 对象、类型等。
如果我们可以使用 jQuery 传递一个字符串，它会以对象形式进入 HTML。虽然内容尚未预览，但它已在 HTML 正文中创建了空间（不是永久的）。
所以，让我们跳到代码块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="3.js"></script>
<script>
var stringToHTML = function (str) {
var d = $(str);
return d;
}
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
</script>
</body>
</html>
输出：
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
