Question

我想使用单独的javascript文件动态地将标记添加到HTML文件中，但总是会出错：无法读取未定义的属性“appendChild”。真的很困惑。有人可以帮忙吗？非常感谢！下面是我在.js文件中的代码：

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# ...
browser.get(url)

wait = WebDriverWait(browser, 10)
wait.until(EC.presence_of_element_located((By.ID, "results-col")))

bs_obj = BeautifulSoup(browser.page_source, "html.parser")

Answer 1

您收到的消息表示const request = require('request'); // manually promisify request.get() function requestAsync(url) { return new Promise(function(resolve, reject) { request.get(url, function(err, response, body) { if (err) { reject(err); } else { resolve(body); } }); }); } getSkus().then(getURLs).then(function(urls) { return Promise.all(urls.map(function(url) { return requestAsync(url).then(scrapeData).then(insertData).catch(function(err) { // log the error, but conciously let the promise iteration continue (without err) console.err(err); // put error in the results in case caller wants to see all errors return err; }); )); }).then(function(results) { // results will be an array of whatever insertData returns // of for any step in the iteration that had an error, it will be // some type of Error object });已返回document.getElementsByTagName("body")[0]。（这就是为什么错误消息显示undefined不存在appendChild的方法。）

您的代码是否在文档加载之前运行？

在这种情况下，您可能无法找到body元素。如果您可以将脚本元素移到body标记的底部，请执行此操作（首先由here建议A.J.）。

body

否则，您可能需要将事件处理程序附加到<body> <main>All your content, tags, whatever...</main> <script src="your-code.js"></script> </body>事件。

另请注意，DOMContentLoaded将获取文档的正文标记。

＆＃13;

document.body

＆＃13;

撇开：您可能希望从document.addEventListener('DOMContentLoaded', function() { var canvasGraphic = (function() { return { getCanvas: function() { var canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.style.border = "black solid"; return canvas; } } })(); canvasGraphic.getCanvas(); })函数<{1}} {/ 1}}

Answer 2

此代码在页面的生命周期中存在于何处？在调用getCanvas（）之前，您确定文档已加载并准备就绪吗？

让我们使用这个示例index.html文档。它将显示您的错误：

<html>
<head>
<script type="text/javascript">
var canvasGraphic = (function(){
    return {
        getCanvas:function(){
            var canvas = document.createElement("canvas");
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(canvas);
            canvas.style.border = "black solid";
        }
    }
})();

canvasGraphic.getCanvas();
</script>
</head>
<body>
</body>
<html>

但是，如果我们将调用getCanvas（）放在另一个函数中并调用该函数的onload，则错误消失：

<html>
<head>
<script type="text/javascript">
var canvasGraphic = (function(){
    return {
        getCanvas:function(){
            var canvas = document.createElement("canvas");
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(canvas);
            canvas.style.border = "black solid";
        }
    }
})();

function initialize() {
    canvasGraphic.getCanvas();
}
</script>
</head>
<body onload="initialize();">
</body>
<html>

有很多方法可以实现这一目标，这很容易。关键是在调用函数之前确保文档DOM已经完成加载。

HTH！

Answer 3

您的代码似乎没有任何问题。只需在body标记的末尾加载脚本文件，或在DOM的readyState准备就绪后执行代码。

＆＃13;

var canvasGraphic = (function() {
  return {
    getCanvas: function() {
      var canvas = document.createElement("canvas");
      var body = document.getElementsByTagName("body")[0];
      body.appendChild(canvas);
      canvas.style.border = "black solid";
    }
  }
})();

canvasGraphic.getCanvas();

＆＃13;

Answer 4

代码在JSfiddle上运行良好：https://jsfiddle.net/vazu4wj5/

我建议的唯一更改是将body.appendChild(canvas);更改为document.body.appendChild(canvas);，它更具体。

这是最终的代码：

var canvasGraphic = (function(){
    return {
        getCanvas:function(){
            var canvas = document.createElement("canvas");
            var body = document.getElementsByTagName("body")[0];
            document.body.appendChild(canvas);
            canvas.style.border = "black solid";
        }
    }
})();

canvasGraphic.getCanvas();

JavaScript动态地将canvas标记添加到HTML文件中失败

4 个答案: