关于insertAdjacentHTML插入脚本

调用insertAdjacentHTML插入JS时注意的几点:

1、要用defer属性标识
2、<script defer>前要加<br>
3、如果要调用刚插入脚本,则调用部分要用单独的<script>标签插入。

vc调用insertAdjacentHTML的正确代码片断:

CComBSTR bstrHTMLText("<br><script defer src=/"http://127.0.0.1/ttt.js/"></script><br><script defer>Msg();</script>");
 pBody->insertAdjacentHTML(T2OLE("AfterBegin"),bstrHTMLText);

注:

如果上面的第3点不太清楚可以运行下面代码的看看区别:

一:
<html >
<body >
<script src="http://127.0.0.1/ttt.js" >Msg(); </script >
</body >
</html >
二:
<html >
<body >
<script src="http://127.0.0.1/ttt.js" > </script >
<script >Msg(); </script >
</body >
</html >

附JS代码:
ttt.js:
function Msg() {
  alert( 'Hello   World ');
}

### 使用 `insertAdjacentHTML` 方法添加复制按钮 为了向页面中的特定位置动态添加一个复制按钮,可以使用 JavaScript 的 `insertAdjacentHTML` 方法。此方法允许指定新子节点相对于调用它的元素的位置。 下面是一个具体的例子,展示如何创建并插入一个带有点击事件处理程序的复制按钮: ```javascript // 获取目标元素 const targetElement = document.querySelector('#target-element'); // 创建要插入HTML 字符串 const copyButtonHtml = ` <button id="copy-button">Copy</button> `; // 将按钮插入到目标元素之后 targetElement.insertAdjacentHTML('afterend', copyButtonHtml); // 添加点击事件监听器给新的按钮以便执行复制逻辑 document.getElementById('copy-button').addEventListener('click', function () { // 创建临时输入框用于获取选区对象 const tempInput = document.createElement('input'); // 设置其值为目标文本内容 tempInput.value = 'This text will be copied!'; // 把该输入框加入DOM树中使其可被访问 document.body.appendChild(tempInput); // 执行选择操作 tempInput.select(); tempInput.setSelectionRange(0, 999); // For mobile devices try { // 实际触发复制命令 document.execCommand('copy'); console.log('Text was successfully copied!'); } catch (err) { console.error('Unable to copy text.', err); } // 移除临时输入框保持页面整洁 document.body.removeChild(tempInput); }); ``` 这段代码首先选择了页面上的某个现有元素作为参考点 (`#target-element`) 并在其后面插入了一个新的 `<button>` 元素。当用户单击这个按钮时,会触发一段脚本,它通过创建一个新的不可见的 `<input>` 来设置待复制的内容,并利用 `execCommand()` 函数完成实际的文字复制动作[^1]。 #### 关于 `insertAdjacentHTML` 参数说明 - `'beforebegin'`: 插入到当前元素之前,在父级容器内。 - `'afterbegin'`: 插入到当前元素内部的第一个子节点前。 - `'beforeend'': 插入到当前元素内的最后一个子节点后。 - `'afterend'`: 插入到当前元素之后,在父级容器内。 这种方法不仅限于简单的按钮;还可以用来构建更复杂的交互组件或更新现有的 UI 组件而无需重新加载整个网页[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值