如何在里面獲取文字 <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/