Say I have 2 html files, index.html, and example.html and they both use script.js. If I were to use a statement like document.createElement("p"); in the script, how would I specify which html file I want to make the paragraph in?
One way to do this is to play with classes/IDs. The JavaScript file will work on whichever DOM is loaded, whether it's a DOM based on your first HTML or the second.
If you were to do this, you could--in theory--have a specific ID on one HTML file and another ID on the other. Your JS file can append the paragraph to the node with that ID, but only if the ID is actually on the DOM.
This is far from ideal though.
If you don't want the element to be created in every HTML file in which the JS file is included, the code should be invoked from the HTML file as appropriate. For example, you would add a <script> block in the HTML file that calls createMyElement, and createMyElement would be a function in the shared JS file.
Where do you intend on injecting the paragraph element? You could give each section a different id and do something along the lines of :
function InjectHtmlElement(bodyId, element, modifyBodyCallBack)
{
let body = ducement.getElementById(bodyId);
if(body == null)
{
return
}
modifyBodyCallBack(body, element);
}
<body id="first"></body>
<body id="second"></body>
This isn't ideal but it'll work.
by appending the node element to an element in the desired file.
var p = document.createElement("p");
document.body.appendChild(p);
to learn more about appendChild
Related
I'm developing a website with bootstrap.
If I want to modify the navbar, I don't want to go to any html files and make changes.
So would like to use javascript to "inject" the html code into the actual html file but I don't know how to do it.
This is what I tried.
document.write("<p>html code here</p>")
It, however, doesn't work. What the most conveniente and simple solution could be?
You can try something like this example below:
let newElement = document.createElement('div');
newElement.className = 'new-element';
This will create a div - assign it to the variable named 'newElement' and creating a class associated with that element named "new-element".
I am not able to change the background image of a division in my project website.
I am using this code in js file:
document.getElementsByClassName("home").style.backgroundImage = "url('../images/background4.jpg')";
my div in html is:
<div id="intro" class='home' align='center'>
also my js file is located in project/js/script.js
images are located in project/images/background4.jpg
and index.html is in project/index.html
I am not able to find out the mistake!
EDIT
I also tried document.getElementById()
but that also doesn't works.
The base path context is defined by index, not by script.js (is not PHP) :
// index.html = ./project/
// execute index.html/js/script.js
// loading index.html/images/background4.jpg
document
.getElementsByClassName('home')[0]
.style
.backgroundImage = "url('images/background4.jpg')";
inscpect DevTools:Network in you browser (right click : inspect).
have nice day.
You have to target your div using document.getElementById('intro'), not getElementsByClassName('home').
getElementsByClassName returns a collection of elements, not an element.
Edit : And yes, as Evehne said, the path should be "images/", not "../images" as you would do in a css file for example.
I am trying to avoid header, sidebar info repeating of my html page template.
So, I was thinking to user innerHTML to replace the contents on the fly. However, I do not want to put entire target html on the same page under innerHTML as it will be nightmare to debug or maintain later.
So, is there a way to specify the another page link in the innerHtml and have contents separate?
just as an example
<script type="text/javascript">
function replacePage(page){
var ele = document.getElementById('page-wrapper'); ele.innerHTML = "<div>hey vik</div>";
}
</script>
I'm looking if i can specify the innerHTML value as some .html file name and move the <div>hey vik</div> there.
ok guys i finally used jquery to do this. What I did was instead of loaded content part, i actually moved the static part into a .html file and then loaded it via jquery as
$(function() {
$("#includedContent").load("navbar.html");
};
the place where i need to rander it i added as below
<div id="includedContent"></div>
You can use document.documentElement to select the root element of the document and the store it in a variable:
let content = document.documentElement;
And then use innerHTML to change the page content:
content.innerHTML = "<body><h1>text</h1><body>";
I have a doubt with javascript document.write method. Mostly when I use document.write() it shows me the content written with the method in a different page. For instance, if I write the command like this, document.write("Hello, My name is Sameeksha"); then the execution of this line takes me to a different document on the same page. I want to be able to append the message on the same page, with other elements of the page. For example, if I have text boxes and buttons on the page and I want the text with document.write to appear under all the content of the page or on a particular section of a page. Please suggest what can be done to get the output in this way? As, this way it will be really easy to create dynamic HTML content.
Thank you so much for your time.
Regards,
Sameeksha Kumari
document.write is basically never used in modern Javascript.
Whan you do instead is to create explicit DOM elements and append them to the document in the place you want. For example
var x = document.createElement("div"); // Creates a new <div> node
x.textContent = "Hello, world"; // Sets the text content
document.body.appendChild(x); // Adds to the document
Instead of appending to the end you can also add child nodes to any existing node. For example:
function addChatMessage(msg) {
var chat = document.getElementById("chat"); // finds the container
var x = document.createElement("div");
x.textContent = msg;
chat.appendChild(x);
}
I'd say 6502 posted the more correct way to do it, but I think someone should mention innerHTML as well. First, give some element in your HTML body an id so you can reference it:
<div id="outputDiv">I'm empty.</div>
Then, either at the bottom of your document (at the end of the <body> tag), or any other time after the page is loaded, you can update the contents with innerHTML:
document.getElementById("outputDiv").innerHTML = "<h1>Hello!!!</h1>";
Here's a jsfiddle demonstrating this. This isn't as clean/correct/elegant as using the more standard DOM methods, but it's well supported. Sometimes quick and dirty is what you need!
I have links such that when the user clicks on them, the DOM is quckly updated using the methods below.
Basically, I just set the innerHTML document to the text and the page updates.
However I would like html code with other html code when applicable. This is the only place in my .js file that has a significant amount of text. How do I move this?
/*
link - quick dom links - would like to find a way to move this into xhtml where it belongs
*/
function o2(a,b)
{
return document.getElementById(a).innerHTML=b;
}
function l1()
{
........
I would recommend putting all of the possible HTML into your HTML file. Assign a unique id to each element and use CSS to hide them all or all but one by default (using 'display: none'). Then your javascript function can simply change CSS based on which html fragment you need to be visible.