Manipulating DOM Element Content and Structure
Tech
1
innerHTML vs. innerText for Modifying Tag Content
Use innerHTML to read or write the HTML content inside paired tags. Use innerText to read or write the plain text content within those tags. For form elements like <input>, access their displayed text via the value property.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Content Property Demo</title>
<style>
.contentBox {
border: 1px solid blue;
width: 250px;
height: 150px;
padding: 10px;
}
</style>
<script>
function inspectProperties() {
const boxElement = document.getElementById('contentArea');
const textInput = document.getElementById('textField');
// Output text content and HTML content
console.log('Plain text content:', boxElement.innerText);
console.log('HTML structure:', boxElement.innerHTML);
// Output form value
console.log('Input field value:', textInput.value);
}
function modifyProperties() {
const boxElement = document.getElementById('contentArea');
const textInput = document.getElementById('textField');
// innerText treats input as literal text
// boxElement.innerText = "<strong>Literal Text</strong>";
// innerHTML parses the input as HTML markup
boxElement.innerHTML = "<strong>Bold HTML Text</strong>";
// Set the value of the input field
textInput.value = "Updated field content";
}
</script>
</head>
<body>
<div id="contentArea" class="contentBox">
Initial text
<em>with nested italic element</em>
more text.
</div>
<input type="text" id="textField" value="Default input text">
<br><br>
<button onclick="inspectProperties()">Log Properties</button>
<button onclick="modifyProperties()">Change Content</button>
</body>
</html>
Creating, Adding, and Removing DOM Elements
Dynamically generate new elements using document.createElement(). Ensert them into the DOM tree with appendChild(). Remove existing elements using removeChild().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Element Management</title>
<style>
#targetContainer {
border: 2px dashed green;
width: 90%;
min-height: 150px;
padding: 15px;
margin-top: 10px;
}
</style>
<script>
function addNewElements() {
const container = document.getElementById('targetContainer');
// Create new form elements
const newTextField = document.createElement('input');
newTextField.type = 'text'; // Setting attributes via property
newTextField.placeholder = 'Enter username';
const newPasswordField = document.createElement('input');
newPasswordField.setAttribute('type', 'password'); // Alternative method
newPasswordField.setAttribute('value', 'defaultPass');
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Clear All';
// Add a line break for formatting
const lineBreak = document.createElement('br');
// Define removal logic for the button
deleteButton.onclick = function() {
container.removeChild(newTextField);
container.removeChild(newPasswordField);
container.removeChild(deleteButton);
container.removeChild(lineBreak);
};
// Append all created elements to the container
container.appendChild(newTextField);
container.appendChild(newPasswordField);
container.appendChild(deleteButton);
container.appendChild(lineBreak);
}
</script>
</head>
<body>
<div id="targetContainer">
<p>Dynamic elements will appear here.</p>
</div>
<button type="button" onclick="addNewElements()">Insert Form Elements</button>
</body>
</html>
Interactive Element Application Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Interactive Button Demo</title>
<style>
#dialogBox {
width: 220px;
height: 180px;
border: 2px solid orange;
background-color: #f0f0f0;
text-align: center;
padding: 15px;
position: absolute;
top: 150px;
left: 150px;
}
#dialogBox button {
width: 60px;
padding: 8px;
margin: 15px 5px;
}
</style>
<script>
function moveDialog() {
const dialog = document.getElementById('dialogBox');
// Randomly reposition the dialog within a range
const newLeft = Math.floor(Math.random() * 800);
const newTop = Math.floor(Math.random() * 400);
dialog.style.left = newLeft + 'px';
dialog.style.top = newTop + 'px';
}
function showAffirmation() {
alert('Thank you for your positive response!');
}
</script>
</head>
<body>
<div id="dialogBox">
<h4>Do you find this content useful?</h4>
<button onclick="showAffirmation()">Yes</button>
<button onmouseover="moveDialog()">No</button>
</div>
</body>
</html>
