const newDiv = document.createElement("div"); 
// and give it some content
const newContent = document.createTextNode("Hi there and greetings!");
// add the text node to the newly created div
newDiv.appendChild(newContent);

// returns a Boolean value indicating whether the given Node has child nodes or not
console.log(newDiv.hasChildNodes());

// add the newly created element and its content into the DOM
const currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);

// replaces a child node within the given (parent) node
document.body.replaceChild(newDiv, currentDiv);

// removes a child node from the DOM and returns the removed node
document.body.removeChild(newDiv);

const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

<img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940">
</img>

const img = document.getElementsByTagName('img');

console.log(img.dataset.x); // "414354"

const newDiv = document.createElement("div");

newDiv.innerHTML = "<p>Hi there and greetings!</p>";

console.log(newDiv.innerHTML); // "<p>Hi there and greetings!<p>"
console.log(newDiv.textContent); // "Hi there and greetings!"

console.log(newDiv.outerHTML); // <div><p>Hi there and greetings!<p></div>

const newDiv = document.createElement("div");

newDiv.style.color = "#ffffff";
newDiv.style.backgroundColor = "#000000";
newDiv.style.margin = "5px";

// or

newDiv.style.cssText = `
	color: #ffffff;
	background-color: #000000;
	margin: 5px;
`;

const computedStyle = getComputedStyle(newDiv);

newDiv.style.marginTop = "calc(computedStyle.marginTop + 5px)";