Web developer specializing in React, Vue, and front end development.
To load an HTML page in a div using JavaScript, we set the innerHTML property.
For instance, we write
document.getElementById("content").innerHTML =
'<object type="text/html" data="home.html" ></object>';
to select the wrapper element with getElementById.
And then we set its innerHTML property to a string with an object element that loads the home.html page.
To scroll to top of page with JavaScript, we set the scrollTop property of the body element to 0.
For instance, we write
document.body.scrollTop = document.documentElement.scrollTop = 0;
to set document.body.scrollTop and document.documentElement.scrollTop to 0 to scroll to the top of the page.
To replace text inside a div element with JavaScript, we set the innerHTML property.
For instance, we write
fieldNameElement.innerHTML = "My new text!";
to set the innerHTML property of the fieldNameElement element to the new text content.
To fix Error: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’ with JavaScript, we should make sure we call appendChild with a valid node.
For instance, we write
const z = document.createElement("p");
z.innerHTML = "hello";
document.body.appendChild(z);
to create a p element node with createElement.
And then we set its innerHTML property to 'hello'.
Finally, we call document.body.appendChild to append the z element as the last child of the body element.
To add cross-browser multi-line text overflow with ellipsis appended with CSS, we use the -webkit-line-clamp property.
For instance, we write
<div>
This is a multi-lines text block, some lines inside the div, while some
outside
</div>
to add a div with text.
Then we write
div {
width: 205px;
height: 40px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
to add -webkit-line-clamp: 2; with the width and height to hide everything after 2 lines.