JavaScript 中將字串轉換為 HTML
在 JavaScript 中，一些特定的約定使整體開發歷史提前一步被整合。同樣，定址字串的一種非靜態方法（以 HTML 元素捐贈模式的形式），然後將其作為唯一的物件傳遞給 HTML 主體。
這使介面動態化，並且可以解決許多原本很難呼叫的問題。
以下內容中的程式碼示例將演示如何實現這種轉換。首先，我們將傳遞帶有 innerHTML 屬性的字串。
在下一個示例中，我們將使用 DOM parse 方法。大多數情況下不鼓勵這種約定，因為它存在許多瀏覽器接受的問題。
在最後一節中，我們將檢查我們傳遞的字串是 HTML 物件還是隻是字串。讓我們潛入吧！
使用 innerHTML 屬性將字串轉換為 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() 介面將字串轉換為 HTML 物件
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>'));
輸出：
-Interface-to-Convert-String-to-HTML-Object.webp)
使用 jQuery 確保在 HTML 中傳遞的字串的型別
在本節中，我們將確定總體任務。我們將檢查是否生成了 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>
輸出：
