Inserting HTML into a Div

Inserting HTML into a div

I think this is what you want:

document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>';

Keep in mind that innerHTML is not accessible for all types of tags when using IE. (table elements for example)

Insert html into div tags?

Yes it is possible, in two steps.

1- Attach a dom-ready event handler

<body onload="addHtml()">

2- In you JS function, select the target div and insert code in it :

var htmlStr = '<strong>Code</strong>';
document.getElementById('insertHTML').innerHTML = htmlStr;

Hope it helps.

How do I load an HTML page in a div using JavaScript?

I finally found the answer to my problem. The solution is

function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

Add/remove HTML inside div using JavaScript

You can do something like this.

function addRow() {
const div = document.createElement('div');

div.className = 'row';

div.innerHTML = `
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label>
<input type="checkbox" name="check" value="1" /> Checked?
</label>
<input type="button" value="-" onclick="removeRow(this)" />
`;

document.getElementById('content').appendChild(div);
}

function removeRow(input) {
document.getElementById('content').removeChild(input.parentNode);
}

Insert Html element completely right into a div with CSS (Vue)

You could try the following CSS:

.wrapper > .filter-container {
display:flex;
background-color:green;
justify-content:space-between;
}

For more information on how to work with flex elements have a look here

How to insert HTML element via JavaScript?

If you want to attach an image into your div you can do the following:

function spawn1() {
let imageElement = document.createElement('img');
imageElement.setAttribute('src','images/redtarget.png');
imageElement.setAttribute('id', 'imageId'); //Use the id for a CSS selector to style it
let windowDiv = document.getElementById("window");
windowDiv.appendChild(imageElement);
}

Include another HTML file in a HTML file

In my opinion the best solution uses jQuery:

a.html:

<html> 
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>

<body>
<div id="includedContent"></div>
</body>
</html>

b.html:

<p>This is my include file</p>

This method is a simple and clean solution to my problem.

The jQuery .load() documentation is here.



Related Topics



Leave a reply



Submit