Динамически создавать ссылку Javascript

Я пытаюсь установить свой текст в качестве ссылки, чтобы при нажатии на него запускалась функция. Прямо сейчас я просто установил его на google.com, чтобы попытаться вывести текст в виде ссылки, но, похоже, он вообще ничего не делает. Это просто статический текст. Какие-либо предложения?

        var leftDiv = document.createElement("div"); //Create left div
        leftDiv.id = "left"; //Assign div id
        leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
        leftDiv.style.background =  divColor;
        a = document.createElement('a');
        a.setAttribute('href', 'google.com');
        user_name = a.appendChild(document.createTextNode(fullName + ' '));

        leftDiv.appendChild(user_name); // Add name to left div

javascript href createelement
person mkyong    schedule 22.03.2012    source источник
comment
Ссылка на другой сайт, я думаю, должна использовать полный URI/доменное имя: google.com должно быть http://google.com, чтобы href ссылался на Google.   -  person David says reinstate Monica    schedule 23.03.2012
comment
Он по-прежнему отображается как статический текст вместо ссылки.   -  person mkyong    schedule 23.03.2012
comment
Вы никогда не вставляете ссылку в документ, только текстовый узел. a.appendChild возвращает только что добавленный узел.   -  person Felix Kling    schedule 23.03.2012

Ответы (2)


arrow_upward
27
arrow_downward

Посмотрите на этот пример:

http://jsfiddle.net/ajXEW/

Я добавил в код несколько комментариев, поясняющих различные шаги.

    var leftDiv = document.createElement("div"); //Create left div
    leftDiv.id = "left"; //Assign div id
    leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
    leftDiv.style.background =  "#FF0000";
    a = document.createElement('a');
    a.href =  'google.com'; // Insted of calling setAttribute 
    a.innerHTML = "Link" // <a>INNER_TEXT</a>
    leftDiv.appendChild(a); // Append the link to the div
    document.body.appendChild(leftDiv); // And append the div to the document body
person Simon Edström    schedule 22.03.2012
comment
Почему a = document.createElement('a'); не var a = document.createElement('a');? - person JAT86; 20.03.2018
comment
var a и a - это одно и то же var не является обязательным в javascript - person Jin Thakur; 08.05.2019
comment
Без var этот код создает переменную в глобальной области видимости. Таким образом, этот код создает переменную window.a, которую любой другой может перезаписать и изменить в любое время во время выполнения этого кода. - person Heretic Monkey; 20.03.2020

arrow_upward
1
arrow_downward

Попробуйте это: http://jsfiddle.net/HknMF/5/

var divColor = "red";
var fullName = "bob";

var leftDiv = document.createElement("div"); //Create left div
        leftDiv.id = "left"; //Assign div id
        leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
        leftDiv.style.background =  divColor;
        a = document.createElement('a');
        a.setAttribute('href', 'google.com');
        a.appendChild(document.createTextNode(fullName + ' '));

        leftDiv.appendChild(a); // Add name to left div

    document.body.appendChild(leftDiv);
person GoldenNewby    schedule 22.03.2012