时间戳

首页 > 解决方案 > 如何在 JQuery 中将 outerHTML 作为字符串返回？

javascript - 如何在 JQuery 中将 outerHTML 作为字符串返回？

问题描述

我想在标题中显示按钮的 outerHTML ，就像我添加的代码一样，但是当我使用 outerHTML 时，它正在创建新元素而不是返回字符串。（我用外部 JavaScript 文件分别添加了这些 JQuery 代码，但在这里，网站不允许我有两个代码块，所以我把 JQuery 放在我的 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">
    <link rel="stylesheet" href="style.css">
    <script src="./jquery-3.6.0.js" defer></script>
    <script src="./script.js" defer></script>
    <title>JQuery Learn</title>
</head>
<body>
    <header>
        <p>This is JQuery Learning</p>
    </header>
    <main>
        <p class="pclass">Button 1 Click Event</p>
        <button id="btn1">Button 1</button>
    </main>
</body>
</html>




$('#btn1').click(function(e){
 $('header>p').html('this button contains the outerHTML of'+" "+e.currentTarget.outerHTML);
});

标签： javascripthtmljquery

解决方案

它正在返回一个字符串。您错误地识别了问题的原因。

该$(...).html()方法获取该字符串，将其视为 HTML，从中生成 DOM 元素，并将结果插入到文档中。

如果要将字符串作为文本节点插入，请使用该$(...).text()方法。

推荐阅读