How to deploy html over div with class?

JavaScript
1

how to deploy html over div with class?

example:

//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>
  </div>
2

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
3

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

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

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

4

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

1 Like
5

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 https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

2 Likes
6

Alternatively you might insert adjacent HTML like so:

document
  .querySelector(".help-brother")
  .insertAdjacentHTML('beforebegin', 'Hello world')
2 Likes
8

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

<!DOCTYPE HTML>
<html lang="en">
<head>

<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;
 }
</style>

</head>
<body>
 
 <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>
 </div>

<script>
(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 ));
</script>

</body>
</html>

coothead

9

thanks for answering

10

thanks for answering 2

11

Thank you so much for having responded worked

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.