How can I add text dynamically to my HTML code? Instead of the paragraph text, I want to add the tex-CodePudding

The portion in the HTML code that I want to add dynamically is the paragraph where it says news. This is supposed to be a sliding banner that will display a news feed.

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>news banner</title>
    <link rel="stylesheet" href="./styles.css" type="text/css" />
  </head>
  <body overflow-x:hidden>
    <div >
      <p >
        news - news - news - news - news - news - news - news - news -news -
        news - news -news - news - news -news - news - news -news - news - news
        -news - news - news -news - news - news -
      </p>
    </div>
  </body>
</html>

CSS code:

.box {
  position: relative;
  top: 90vh;
}

.banner {
  font-size: 2.5rem;
  margin: auto;
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  animation: banner linear infinite 40s;
}

@keyframes banner {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

CodePudding user response：

I would use Bootstrap carousels.

Some quick googling brought me to what I think exactly you're looking for. Just change the styling and replace the <img> tags and you're good to go.

Here it is.

CodePudding user response：

If you just want to change the content of paragraph, you need to provide an ID like this:

<p  id="mybanner">
news - news2 - news3
</p>

then using jquery you can update the content like this:

<script>
   $("#mybanner").html("New content goes here");
</script>

Of course, you will need to include the jQuery library (and any others like sliders). You can replace "New content goes here" with any HTML including images.