JavaScript, HTML, нет JQuery - как добавить строку, содержащую ссылку в середине предложения? - PullRequest
Новая
       11

JavaScript, HTML, нет JQuery - как добавить строку, содержащую ссылку в середине предложения?

0 голосов
/ 06 января 2019

Я довольно новичок в JavaScript. Я пытаюсь добавить абзац в HTML (желательно используя DOM). Абзац должен содержать строку, предложение, которое имеет ссылку в середине. Абзац будет иметь различное содержание в зависимости от выбора пользователя и будет отображаться на веб-странице после нажатия кнопки. Часть моего кода, которая связана с вопросом, вставленным ниже. Где ссылка будет 'contactThem'. 

//Returns a correct text to be displayed in a hidden panel.
function displayText(result) {
    const fR = parseInt(result);
    const contactThem = "<a href='form.html'>form</a>";
    let toInclude = "";
    if (fR < 5) {
        toInclude = "Some text";
    } else {
        toInclude = "Different text" + contactThem + "more text.";
    }
    return toInclude;
}

//Displays hidden panel with contents
function showPanel(displayText) {
    const toShow = displayText;
    const square = document.getElementById("toBeDisplayed");
    while (square.hasChildNodes()) {
        square.removeChild(square.lastChild);
    }
    const yourM = document.createElement("h2");
    let yourMT = document.createTextNode("Title");
    const pp = document.createElement("p");
    let ppT = document.createTextNode(toShow);
    yourM.appendChild(yourMT);
    square.appendChild(yourM);
    pp.appendChild(ppT);
    square.appendChild(pp);
    square.style.visibility = "visible";
}

Я подозреваю, что мой подход может быть неправильным ... Я думал о том, чтобы, возможно, создать 2 отдельных элемента div и отобразить их в зависимости от выбора пользователя, но я действительно предпочел бы сделать это в JavaScript, если это возможно. Я понимаю, что добавление ссылок в качестве переменных является неправильным. Это временный владелец, пока у меня нет решения.

1 Ответ

0 голосов
/ 06 января 2019

Всякий раз, когда вы хотите добавить элемент HTML, например <a href="http://my_url.com">, внутри существующего элемента, вы можете сделать это с помощью HTMLElement.innerHTML = "text that will be rendered" (в отличие от HTMLElement.innerText, который будет отображать все как есть).

В вашем случае это будет что-то вроде: 

const contactThem = "<a href='form.html'>form</a>";
let el = document.createElement("p")
el.innerHTML = "Different text" + contactThem + "other text."
...