Wrapping a string in a div in pure javascript-CodePudding

Is there a way in pure javascript to wrap a nacked string?

I have a string that I'm splitting based on a character to separate the header from the rest of the content. I would very much like to style that header, but i can't seem to find a good way to wrap a div around it with a class.

All I can seem to find is wrapping a div around something that already has other elements.

My code looks like this

var string = "Title*This is the very long content";
var title = string.split('*')[0]
var body = string.split('*')[1]

//put them back together
string = title   body;

CodePudding user response：

but i can't seem to find a good way to wrap a div around it with a class?

You can create an element (which is at the end a tag HTML) with createElement and attach it a class with className

let string = "Title*This is the very long content";
/*
let title = string.split('*')[0]
let body = string.split('*')[1]
*/
let [title, body] = string.split('*'); // Destructuring assignment


let headerTitle = document.createElement('h1');
headerTitle.textContent = title;
headerTitle.className = "red";//headerTitle.classList.add('red');


let bodyHTML = document.createElement('p');
bodyHTML.textContent = body;

document.querySelector('#content').innerHTML = headerTitle.innerHTML  "<br/>"  bodyHTML.innerHTML;

.red{
  color: red;
}

<div id="content" />

Tip Try to avoid var keyword for declaring variable and replace them with either let or const and better using Destructuring assignment

CodePudding user response：

Here is a solution using a function, for example, createCustomElement(tag, text, customClass) which returns an element, see MDN docs on document.createElement() and document.createTextNode()

The element returned from the function can be appended to another element or to a document fragment, see MDN docs on document.createDocumentFragment()

function createCustomElement(tag, text, customClass) {
  const el = document.createElement(tag);
  if (text) el.append(document.createTextNode(text));
  if (customClass) el.classList.add(customClass);
  return el;
}

let string = "Title*The title is a child text node of the div";
let [title, body] = string.split('*');

let divElement = createCustomElement('div', title, "bigRed");
let bodyElement = createCustomElement('p', body, "smallGreen");

divElement.append(bodyElement);
document.body.append(divElement);

//*****  Below are two alternatives ways to achieve the above

string = "Title*The title is an <h1> element and is a child element of the div";
[title, body] = string.split('*');

divElement = createCustomElement('div', "", "pinkBackGround");
titleElement = createCustomElement('h1', title);
bodyElement = createCustomElement('p', body, "smallGreen");

divElement.append(titleElement, bodyElement);
document.body.append(divElement);

//*****

string = "Title*The title is an <h1> element and is a child element of the div and no classes are applied";
[title, body] = string.split('*');

divElement = createCustomElement('div');
titleElement = createCustomElement('h1', title);
bodyElement = createCustomElement('p', body);

divElement.append(titleElement, bodyElement);
document.body.append(divElement);

div {
  margin: 3px;
  border: solid 2px black;
}

.bigRed {
  font-size: 3rem;
  color: red;
}

.smallGreen {
  font-size: 1rem;
  color: green;
}

.pinkBackGround {
  background: pink;
  color: blue;
}