how to replace document.write with innerHTML

Question

I want to replace the document.write with innerHTML. but it won’t create the links when I try it. I don’t know if there is an issue of how I am building the path variable so it won’t print out the links right. Right now it won’t print out any links.

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

<script>

    var path = "";
    var href = document.location.href;
    var s = href.split("/");
    for (var i=2;i<(s.length-1);i++) {
        path+="<a class='crumb'  href=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+" </a>";
    }
    i=s.length-1;
    path+="<a class='crumb'  href=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+" </a>";
    var url =  path;
    //document.getElementById(".breadcrumb").innerHTML = url;
    document.write(url);

</script>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/webjars/bootstrap-fileinput/4.2.7/css/fileinput.min.css">
<link rel="stylesheet" href="/webjars/bootswatch/3.3.5+4/yeti/bootstrap.min.css">
<link rel="stylesheet" href="/webjars/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/webjars/jquery-ui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="/static/app/css/app.css">
<link rel="stylesheet" href="/static/app/css/style.css">
<script src="/webjars/jquery/2.1.4/jquery.min.js"></script>
<script src="/webjars/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<script src="/webjars/bootstrap-fileinput/4.2.7/js/fileinput.js"></script>
<script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/webjars/bootstrap-fileinput/4.2.7/js/fileinput_locale_ja.js"></script>
<script src="/static/app/js/app.js"></script>

<style>

.breadcrumb
{
  witdh : 100%;
  text-align: center;
  border: 5px solid transparent;
}

.crumb
{
 display: inline-block;
 float : left;
 font: 16px Helvetica, Arial, Sans-Serif;   
 color: white;
 background-color: #4E95B6;
 border: 1px solid black;
}
.crumb: hover
{
 color: red;
}

</style>

</head>

<body>

{{>partials/browser-compatibility}}
<div class = "breadcrumb"> </div>
<div class="container-fluid">

Please edit your question so as to include a Minimal, Complete, and Verifiable example. — MJH
– MJH, Commented Oct 14, 2016 at 6:07
I have been moving it around it was nested at first but I will turn it into a external one soon — MNM
– MNM, Commented Oct 14, 2016 at 6:26

Ashish Panchal · Accepted Answer · 2016-10-14 06:10:35Z

4

you can try document.getElementsByClassName('breadcrumb')[0].innerHTML = url;

answered Oct 14, 2016 at 6:10

Ashish Panchal

4403 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ashish Panchal Over a year ago

just put the <script> code at the end of your page then it will work

Ashish Panchal Over a year ago

and yes do not forget to use document.getElementsByClassName('breadcrumb')[0].innerHTML = url;

MNM Over a year ago

after the </html> tag or the </body> tag

MNM Over a year ago

I placed it after the </html> and it works good thank you. I tried after the </body> it didn't work there. I appreciate it.

Ashish Panchal Over a year ago

well you can keep it exactly before </body> tag. the reason you are not getting links is your script is looking for breadcrumb div at the start of your page but the div is not yet loaded so once you keep your javascript code after div element it will parse the div tag and add links into div. another this you can do is you can use ready function that will load your script once dom is ready.

LF-DevJourney · Accepted Answer · 2016-10-14 06:08:59Z

2

use document.ready to ensure have loaded the dom;

you have wrongly used the getElementById;

<div id ="breadcrumb"> </div>
<script>

    var path = "";
    var href = document.location.href;
    var s = href.split("/");
    for (var i=2;i<(s.length-1);i++) {
        path+="<a class='crumb'  href=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+" </a>";
    }
    i=s.length-1;
    path+="<a class='crumb'  href=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+" </a>";
    var url =  path;
    document.getElementById('breadcrumb').innerHTML = url;
    //document.write(url);
  </script>

answered Oct 14, 2016 at 6:08

LF-DevJourney

28.6k30 gold badges170 silver badges321 bronze badges

Collectives™ on Stack Overflow

how to replace document.write with innerHTML

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related