Question

我正在使用以下功能来使用Javascript设置DOM元素：

  createDomEl(type, parentEl, id) {
    let el = document.createElement(type);
    parentEl.appendChild(el);
    el.id = id;

    return el;
    }

它工作得很好，除非我尝试将DOM元素附加到document.body。我尝试了几种方式传递body元素，包括：

const body_el = document.body;

或

const body_el = document.getElementsByTagName('body')[0];

和

createDomEl('section', body_el, 'main-section');

但是我得到了TypeError: parentEl.appendChild is not a function。

编辑：我已经将脚本标签移到了体内，就像这样：

<!DOCTYPE html>
<html>
<head>
 ...
</head>
<body>
 <script src="build/bundle.js"></script>
</body>
</html>

我可以在调用此函数之前记录body元素，即

console.log(body_el)

此日志：

<body>...</body>

我也可以直接用document.body代替函数中的parentEl，该函数起作用。问题似乎正在传递。

createDomEl函数位于导入到主类中的类中，该类被称为实例方法，例如：

import CreateDomEls from './helpers/createDomEls.js';

class Layout {
  constructor(config) {
    this.createDomEls = new CreateDomEls();
    this.createMainSection();
  }

  createMainSection() {
    const body_el = document.getElementsByTagName('body')[0];
    console.log(body_el);
    const mainSection = this.createDomEls.createDomEl(
      'section',
      body_el,
      'main-survival-game-station'
    );
  }

Answer 1

您的脚本标签在结束</body>标签之外（下方）。脚本标签必须位于<body></body>或<head></head>块中才能运行。如果它在文档（<html></html>）级别，则将被忽略。

将<script>标记移到正文的末尾，这样可以确保在执行脚本时正文已加载。

<body>
  ...
  <script>
    // this will run once the body has loaded
  </script>
</body>

此外，您可以将脚本放在头部，以监听文档加载事件。如今，您通常可以依靠

window.onload = function() {
  // your code which manipulates the document here
  createDomEl('section', body_el, 'main-section')
}

请注意，只有执行DOM操作的代码才需要进入window.onload事件处理程序中。这些函数本身可以驻留在此处理程序之外。

难以将document.body作为函数中的参数传递

1 个答案: