How do you access data in an html element with JavaScript
Question
I know this is a stupid question. But holy crap, it's just not working. Here is an extremely basic example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="test">Test</p>
<script>
let test = document.getElementById("test").value
alert(test)
</script>
</body>
</html>
How do I get a variable that contains the text inside of the paragraph? This code does not work. There is apparently no.value attribute for the paragraph object. Why is that? I'm using visual studio code and running it on google chrome if that matters.
2 answers
solution1
1 2019-11-20 21:52:35
Element.value doesn't refer to what you think it does. It's specifically referring to the value of form input elements or HTML elements' attributes' value .
Here are some other options to try:
Use HTMLElement.innerText
The text, "Test", in your element, is a child called a textNode . You can get the text value from any element using Element.innerText (so in your case document.getElementById("test").innerText
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="test">Test</p>
<script>
let test = document.getElementById("test").innerText; // "Test"
alert(test)
</script>
</body>
Using Element.innerHTML
You can also use .innerHTML to get the HTML of an element:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="test"><b>Test</b></p>
<script>
let test = document.getElementById("test").innerHTML; // "<b>Test</b>"
alert(test)
</script>
</body>
Using Element.textContent
You can also use .textContent to get the "text content" of an element:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="test"><b>Test</b></p>
<script>
let test = document.getElementById("test").textContent; // "<b>Test</b>"
alert(test)
</script>
</body>
innerText vs textContent (as per MDN ):
- textContent gets the content of all elements, including and elements. In contrast, innerText only shows “human-readable” elements.
- textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of “hidden” elements. Moreover, since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.)
- Unlike textContent, altering innerText in Internet Explorer (version 11 and below) removes child nodes from the element and permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element anymore.
solution2
0 2019-11-20 21:49:22
you can use the .innerHTML method.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="test">Test</p>
<script>
let test = document.getElementById("test").innerHTML;
alert(test)
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.