如何使用jQuery获得一个元素的外部HTML - BBSMAP

如何使用jQuery获得一个元素的外部HTML

Post published:2023年5月12日
Post category:jquery

要获取一个元素的外部HTML，可以使用jQuery中的outerHTML()方法。以下是使用jQuery获得元素外部HTML的完整攻略。

步骤

首先，需要在页面中引入jQuery库。可以使用CDN链接或者本地文件。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，需要获取目标元素的jQuery对象。这可以通过选择器来实现。

var $targetElement = $('#targetElement');

接下来，使用outerHTML()方法获取目标元素的外部HTML。该方法返回一个字符串，其中包含目标元素的HTML标记及其内容。

var outerHTML = $targetElement[0].outerHTML;
console.log(outerHTML);

最后，执行必要的操作，如将该字符串插入到另一个HTML元素中。

$('#outputElement').html(outerHTML);

示例

示例1

假设有以下HTML。

<!DOCTYPE html>
<html>
<head>
  <title>示例1</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="targetElement">
    <h1>示例1</h1>
    <p>这是一个演示文本。</p>
  </div>

  <div id="outputElement">
    <!--此处将显示示例1的目标元素的外部HTML-->
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    var $targetElement = $('#targetElement');
    var outerHTML = $targetElement[0].outerHTML;
    $('#outputElement').html(outerHTML);
  </script>
</body>
</html>

在控制台中会输出目标元素的完整HTML标记及其内容。

示例2

假设有以下HTML。

<!DOCTYPE html>
<html>
<head>
  <title>示例2</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td id="targetElement">7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>

  <div id="outputElement">
    <!--此处将显示示例2的目标元素的外部HTML-->
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    var $targetElement = $('#targetElement');
    var outerHTML = $targetElement[0].outerHTML;
    $('#outputElement').html(outerHTML);
  </script>
</body>
</html>

在示例2中，目标元素是一个<td>单元格元素。在控制台中会输出目标元素的完整HTML标记及其内容。

Tags: jquery