I'm using cheerio.js to parse some HTML documents, but I'm facing certain problems.
The thing is the HTML file I am using contains the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<p>Text 1</p>
<p>Text 2</p>
</body>
</html>
Now, I also have a javascript array of Items like this:
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
What I want to do is simply replace each P tags with the respective item in the items array, i.e something to this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<h2>orange</h2>
<h2>mango</h2>
</body>
</html>
What I tried so far:
var selections = $("p");
for ( let index = 0; index < selections.length; index++ ) {
selections[index].replaceWith(items[index])
}
But it says that function replaceWith() is not valid
Solution:
using the each method, one can easily process particular elements
solving the above problem:
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
$("p").each((index, element) => $(element).replaceWith(items[index]))
Basically the each method will invoke a callback function where element is the selector of that particular element, and index is the position of the item in that selection.
For more ref, check: https://cheerio.js.org/classes/Cheerio.html#each
Related
why doesn't it work? i just want to add a paragraph to a div. Guys, why doesn't it work? i just want to add a paragraph to a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="pobieranko.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="klasa">lalal</div>
</body>
</html>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
It appears you did not add a script tag to the page as so:
<script>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
</script>
I Don't khow why my console is telling me that the result is undefined.I am learning DOM and found the problem on my first code which i don't understand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let head = document.getElementsByClassName(".main");
console.log(head.textContent);
let tail = document.getElementsByTagName("p");
console.log(tail.textContent);
</script>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
</body>
</html>
The elements doesn´t exist when the script runs in head. Move the script to after the elements
Change from .main to main in getElementsByClassName
getElementsByClassName returns a list so add [0] to getElementsByClassName("main") to get the first element
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.getElementsByClassName("main")[0];
console.log(head.textContent);
let tail = document.getElementsByTagName("p")[0];
console.log(tail.textContent);
</script>
Move your script to the body
document.getElementsByClassName returns a collection of HTML elements, not a single element
with document.getElementsByClassName you should pass main, not .main
the textContent of the div with class main is probably not what you expect
to get an single element by its class name or its tag name, you can also use querySelector which is more simple (but slower)
Here is a working version :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.querySelector(".main");
console.log(head.textContent);
let tail = document.querySelector("p");
console.log(tail.textContent);
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
Basically I want to rephrase a <p> block but the element is null even though I gave it a value. Because of that I can't change the value of it. The weird thing about it, in some other code of mine the exact same thing worked out. Would be nice if someone could explain me my error.
For the understanding of the code. I wrote a quicksort and wanted to show the sorted array. I'm trying to grab my HTML box via the getElementById() Method.
The following code is necessary to know.
const textEl = document.getElementById("test");
function sort(array, low = 0, high = array.length - 1){
let index;
if (array.length > 1){
index = partition(array ,low, high);
if (low < index - 1){
sort(array, low, high - 1);
}
if (index < high){
sort(array, index, high);
}
}
textEl.innerHTML = array;
return array;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="quicksort.js"></script>
</head>
<body>
<div class="div-1">
<p class="array-el" id="test">Test</p>
</div>
</body>
</html>
It is because you are running your javascript before the HTML loads. Put the script at the end of the body tag like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div-1">
<p class="array-el" id="test">Test</p>
</div>
<script src="quicksort.js"></script>
</body>
</html>
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 3 years ago.
i have no idea about this error, because i just checked all of other topics and didn't get result.
let demo = document.getElementById("#demo");
demo.innerText("yo");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
</body>
</html>
//currently your id is demo
let demo = document.getElementById("demo");
demo.innerText="yo";
///if your id is #demo use this
let demo2 = document.getElementById("#demo");
demo2.innerText="yolo";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
<p id="#demo"></p>
</body>
</html>
As your id is demo, not #demo, you need to write your code like this:
let demo = document.getElementById("demo"); // don't use #
demo.innerText = "yo"; // Also change innerText like this
And for changing innerText property have a look at docs. innerText is not a method.
I am trying to display data randomly in my file 'question.json' on HTML but somehow there's nothing happened. I'm starting to learn JavaScript and still don't know how to fix. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Answer Something</title>
<script>
$.getJSON('question.json', function(data){
console.log(data)
let questionList = data[Math.floor(Math.random()* data.length)];
let display = document.getElementById('question');
display.innerHTML = questionList;
});
</script>
</head>
<body>
<nav>
Quick Ask
Quick Answers
</nav>
<h1 id="question"></h1>
<div>
<button>Sai/Không/Trái</button>
<button>Đúng/Có/Phải</button>
</div><br>
<div>
<button>Kết quả vote</button>
<button>Câu hỏi khác</button>
</div>
</body>
</html>