WordPress中如何将JavaScript变量嵌入HTML主体？

嘿，Clara！别担心，新手刚接触WordPress、JS和HTML时遇到这种小卡点太正常了，我来帮你梳理问题并解决～

首先，我注意到你写的脚本有个小细节错误，还有几个WordPress编辑器特有的注意事项，咱们一步步来：

1. 修正脚本的基础错误 #

你原来的脚本标签写的是 <script type="javascript">，这里的type属性值应该是 text/javascript（不过HTML5标准里可以直接省略type，写 <script> 就行）。这个小错误可能会导致浏览器无法正确识别脚本类型。

2. 确保脚本在DOM加载完成后执行 #

这是新手最容易踩的坑：如果你的脚本在页面元素之前加载，执行脚本时<p id="test"></p>还没被浏览器渲染出来，document.getElementById('test')就会找不到元素，自然无法赋值。

解决这个问题有两种简单方法：

• 把脚本放在元素后面：比如在同一个文本块的HTML模式里，先写<p id="test"></p>，再写脚本。
• 用DOM加载事件包裹代码：不管脚本放在哪里，用这个方法都能确保元素加载完成后再执行代码，示例如下：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里创建你的变量
    let myCustomText = '终于成功显示变量啦！';
    // 把变量内容插入到目标元素中
    document.getElementById('test').innerHTML = myCustomText;
  });
  

3. 在Tatsu编辑器里的正确操作步骤 #

你不需要手动添加<body>标签！WordPress的页面模板已经包含了完整的<html>和<body>结构，你只需要添加内容区域的元素即可，多余的<body>会破坏页面结构。

具体操作：

• 打开Tatsu的文本块，切换到HTML模式。
• 先插入要显示内容的元素：<p id="test"></p>
• 然后插入修正后的脚本，比如：

  <p id="test"></p>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    let welcomeText = '你好呀，我是通过JavaScript变量显示的内容！';
    document.getElementById('test').textContent = welcomeText;
  });
  </script>
  

• 保存并预览页面，就能看到变量内容显示出来了～

如果还是有问题，可以检查一下Tatsu编辑器是否有“禁用脚本”的设置，不过一般默认是允许的。

内容的提问来源于stack exchange，提问作者Clara