时间戳

首页 > 解决方案 > javascript - 在单元格内容值周围包裹 iframe 标签

javascript - javascript - 在单元格内容值周围包裹 iframe 标签

问题描述

我有一个<td>标签，里面有一个 url，我想把 url 放在<iframe>周围，这样 url 就会显示在 iframe 中<iframe src='www.youtube.com'>youtube</iframe>

html:

<!DOCTYPE html>
<html>
<body>


<td class='vid'>https://www.youtube.com/</td>

<button onclick="myFunction()">iframe</button>

<script>
function myFunction() {
  var x = document.querySelectorAll("td.vid");
  x.outerHTML = "<iframe src=" + x.textContent + "></iframe>";
}
</script>

</body>
</html>

最初，控制台一直返回一个长度为 0 的节点列表。由于某种原因，控制台在进行了更多测试后不再返回消息（我正在使用 Edge）。

如何正确获取 td 的内部文本/文本内容并在其周围放置 iframe？

标签： javascriptiframehtml-table

解决方案

一个td元素必须放在一个table元素中才能工作。

检查这个例子。

function myFunction() {
  var x = document.querySelector(".vid");
  x.outerHTML = "<iframe src=" + x.textContent + "></iframe>";
}
<!DOCTYPE html>
<html>
<body>
  <table>
    <td class='vid'>https://www.youtube.com/</td>
  <table>
  <button onclick="myFunction()">iframe</button>
</body>
</html>

推荐阅读