如何在里面获取文字 <p> 标签

Question

我想在“ p”标签中获取字符串，当字符串更改时，我仍然能够获取最新的字符串。

但是我不知道如何从“ p”标签中获取字符串。

测试的几种方法包括：

1. .text();

2. .val(); （我知道这是保留的输入，只是尝试...）

3. .innerHTML();

我的HTML：

<p id="testprint">Original String</p>
<p id="getString"> EMPTY  </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>

我的JavaScript：

function print1st(){
    document.getElementById('testprint').innerHTML = "Generated New String";
}

function changeValue(){
    document.getElementById('testprint').innerHTML = "Change String Success";
}

function getStrfrom1st(){
    copystr = document.getElementById('testprint').text();
  //copystr = document.getElementById('testprint').val();
  //copystr = document.getElementById('testprint').html();
  //copystr = document.getElementById('testprint').innerHTML();
  document.getElementById('getString').innerHTML = copystr;
}

document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);

预期结果：

单击生成按钮后，将生成新字符串，单击“获取字符串”按钮将得到结果“生成新字符串”。

否则，如果我单击第二个按钮更改了第一个值，则一旦我单击第三个按钮将获取更改的字符串。

这是我的JSFiddle： https ://jsfiddle.net/pxaw9xt4/1/

Answer 1

请检查您的浏览器控制台，您可能会看到以下错误：

TypeError：document.getElementById（...）。text不是一个函数

而且正确的.text()不是javascript函数（ text()和val()都是jQuery方法），因此您应该使用.innerHTML或.textContent例如：

copystr = document.getElementById('testprint').innerHTML;

注意： .innerHTML()方法不存在。

希望这可以帮助。

 function print1st(){ document.getElementById('testprint').innerHTML = "Generated New String"; } function changeValue(){ document.getElementById('testprint').innerHTML = "Change String Success"; } function getStrfrom1st(){ copystr = document.getElementById('testprint').innerHTML; document.getElementById('getString').innerHTML = copystr; } document.getElementById('Change').addEventListener('click',changeValue,false); document.getElementById('Generate').addEventListener('click',print1st,false); document.getElementById('getStr').addEventListener('click',getStrfrom1st,false); 

 <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

Answer 2

使用它来获取HTML DOM中的文本内容。

var copystr = document.getElementById("testprint").textContent;

更新和工作提琴在这里 。

Answer 3

您将jQuery函数与普通JS混淆了。 val()和text()都是jQuery中定义的函数，因此无法在普通JS节点上调用。 既然您已使用jQuery对此进行了标记，为什么不对所有内容都使用jQuery？ 您可以使用on()将整个代码段编写如下：

 $('#Change').on('click', function() { $('#testprint').text('Change String Success'); }); $('#Generate').on('click', function() { $('#testprint').text('Generated New String'); }); $('#getStr').on('click', function() { $('#getString').text( $('#testprint').text() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

---

另外，如果您只想使用香草JS处理此问题，则可以按以下方式使用innerHTML属性：

 function print1st() { document.getElementById('testprint').innerHTML = "Generated New String"; } function changeValue() { document.getElementById('testprint').innerHTML = "Change String Success"; } function getStrfrom1st() { copystr = document.getElementById('testprint').innerHTML; document.getElementById('getString').innerHTML = copystr; } document.getElementById('Change').addEventListener('click',changeValue,false); document.getElementById('Generate').addEventListener('click',print1st,false); document.getElementById('getStr').addEventListener('click',getStrfrom1st,false); 

 <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

Answer 4

使用Jquery您可以使用on方法向按钮添加click事件，并使用#id选择器，我们可以获取/设置p标签的文本

 $('#Change').on('click', function() { $('#testprint').text('Change String Success'); }); $('#Generate').on('click', function() { $('#testprint').text('Generated New String'); }); $('#getStr').on('click', function() { $('#getString').text( $('#testprint').text() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="testprint">Original String</p> <p id="getString"> EMPTY </p> <button id="Generate">Generate</button> <button id="Change">Change</button> <button id="getStr">Get String to first "p" tag</button> 

Answer 5

您可以用设置方法相同的方式获取值

copystr = document.getElementById('testprint').innerHTML ;

Answer 6

只需使用textContent 。

范例 ：

var copystr = document.getElementById('testprint').textContent;

这是更新的JsFiddle

Answer 7

innerHTML不应包含方括号。 检查jsfiddle

copystr = document.getElementById('testprint').innerHTML;

https://jsfiddle.net/pxaw9xt4/7/