时间戳

首页 > 解决方案 > jQuery 的 .text() 和 JavaScript 的 .innerText 都不起作用？

javascript - jQuery 的 .text() 和 JavaScript 的 .innerText 都不起作用？

问题描述

我目前正在尝试为我的网站上的一些文本设置动画，并建立一个小测试网站来摆弄。
这是我的测试网站的样子：

  <head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        //What I tried with jQuery
        console.log("Content: " + $('p').text());

        //What I tried with JavaScript
        var text = document.getElementsByClassName('test').item(0);
        console.log(text.innerText);

        //This returns the HTMLCollection object, text[0] is undefined
        var text = document.getElementsByClassName('test');
        console.log(text);
    </script>
  </head>

  <body>

    <p class="test">Hello World!</p>

  </body>


//What I tried with jQuery
console.log("Content: " + $('p').text());

//What I tried with JavaScript
var text = document.getElementsByClassName('test').item(0);
console.log(text.innerText);

//This returns the HTMLCollection object, text[0] is undefined
var text = document.getElementsByClassName('test');
console.log(text);
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<p class="test">Hello World!</p>

在这里，我已经尝试使用 jQuery 而不是 JavaScript，因为它似乎更易于使用。但是，如果我（本地）访问我的网站，它只会Content:在控制台内打印（JavaScript.innerText将返回未定义）。

如果它很重要：我正在使用 Ubuntu 19.10 来开发和测试我的网站。

标签： javascriptjqueryhtml

解决方案

在脚本运行之前，您需要等待页面加载 (DOM)。正如我现在所看到的，您的脚本在<p>创建段落 ( ) 元素之前运行。

您可以：

1）让它在页面加载后运行代码。（推荐）...或

2) 将脚本移动到段落 ( <p>) 标记之后。

方法一

// jQuery
$(document).ready(function() {
    console.log("Content: " + $('p').text());
});

// JavaScript
document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
  var text = document.getElementsByClassName('test').item(0);
  console.log(text.innerText);
});

方法2：请参考@Edit的回答。

推荐阅读