How to deploy html over div with class?

how to deploy html over div with class?


//text deployed here
<div class="help-brother">
    <div class="test" style="background-color:lavender;">.please dollar from Brazil kkkkkkkkkkkk</div>
    <div class="test" style="background-color:orange;">please dollar from Brazil kkkkkkkkkkkk</div>
    <div class="test" style="background-color:lavender;">please dollar from Brazil kkkkkkkkkkkk</div>

Sorry but I don’t understand what you’re asking. You’ve posted in JavaScript but there’s no JS in your example. Can you explain in more detail what you are trying to achieve?

1 Like

deploy HTML text above this <div class = "help-brother">

<header><title>This is title</title></header>
Hello world

acima da div <div class = "help-brother">

Are you saying you want to insert some text using JavaScript? The word “deploy” doesn’t mean much in this context.

1 Like

You would gain a reference to the parent of an HTML element that already on the page:

var helpBrother = document.querySelector(".help-brother");
var parent = helpBrother.parentNode;

And then you would use insertBefore to insert other HTML content before it.

var div = document.createElement("div");
div.appendChild(document.createTextNode("Example text"));

parent.insertBefore(div, helpBrother);

Details are at


Alternatively you might insert adjacent HTML like so:

  .insertAdjacentHTML('beforebegin', 'Hello world')

…and tidied up a little bit it might look a bit like this…

<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>insert element before</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
#father {
    padding: 0.5em;
    margin-bottom: 1em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
.help-brother {
    max-width: 62.5em;
    margin: auto;
    border: 1px solid #000;
    border-top: 0;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
.help-brother div {
    padding: 0.5em;
    border-top: 1px solid #000;
.help-brother div:nth-child(odd ) {
    background-color: #e6e6fa;
.help-brother div:nth-child( even ) {
    background-color: #ffa500;

 <div class="help-brother">
  <div>please dollar from Brazil kkkkkkkkkkkk</div>
  <div>please dollar from Brazil kkkkkkkkkkkk</div>
  <div>please dollar from Brazil kkkkkkkkkkkk</div>

(function( d ) {
   'use strict';
   var helpBrother = d.querySelector( '.help-brother' ),
            parent = helpBrother.parentNode,
               div = d.createElement( 'div');
               div.setAttribute( 'id', 'father' );
               div.appendChild( d.createTextNode( 'Example text' ) );
               parent.insertBefore( div, helpBrother );

}( document ));



thanks for answering

thanks for answering 2

Thank you so much for having responded worked