Блог

Главная - Вопросы по программированию - Поместите значение JavaScript в HTML

Поместите значение JavaScript в HTML

#javascript #html

Вопрос:

Как поместить значение JavaScript в HTML ?

Я пытаюсь поместить значение JavaScript в HTML, как показано ниже.

 <p>
    Check your Credit Score <a href="http://someaddress.com?first_name='  first_name  '" target="_blank">Here</a>
</p>

Комментарии:

1. Что вы пробовали до сих пор? Что показало ваше исследование? Ход, это исследование провалилось?

Ответ №1:

Для достижения результатов вы можете воспользоваться document.getElementById('').href имуществом:

HTML (добавлен id атрибут в <a> тег):

 <p>
  Check your Credit Score <a id="link" href="" target="_blank">Here</a>
</p>

язык JavaScript:

 window.onload = function() {
    var first_name = 'Peter';
  document.getElementById('link').href = 'http://someaddress.com?first_name='  first_name;
  
  // debug your results
  console.log(document.getElementById('link').href);
}

Вот JSFiddle

Ответ №2:

сделайте это, если вы хотите изменить ссылку document.querySelector('a').href = "http://someaddress.com?first_name=" first_name;

Комментарии:

1. Спасибо @brian033. Я хотел бы придать этому значение first_name .

2. это может быть неверно. document.querySelector() будет возвращен первый <a> элемент в документе, что может быть не очень хорошей практикой в реальной ситуации. См. документацию

Ответ №3:

Ты можешь сделать вот так

 <p>
 Check your Credit Score
<a href="http://someaddress.com?first_name='  first_name  '" target="_blank"
 >Here</a >
</p>

 <script type="text/javascript">
   const a = document.querySelector('a');

   const first_name = 'John';

   a.href = 'http://someaddress.com?first_name='   first_name ;
 
 </script>

Комментарии:

1. это вообще никак не связано. ОП спросил, как вставить first_name переменную в href URL-адрес.

2. О, я не совсем правильно это понял

3. это может быть неверно. document.querySelector() будет возвращен первый <a> элемент в документе, что может быть не очень хорошей практикой в реальной ситуации. И зачем использовать const вместо var этого ? Вы меняете значение.

4. да, я знаю document.querySelector() , что верну первый якорный элемент. Я использовал его здесь, потому что я просто хочу показать этому парню, как вставить переменную javascript в атрибут href.

5. и я использовал const здесь ключевое слово bcz, мы не меняем значение first_name переменной, и здесь const следует следующее good practice in the real situation .

Ответ №4:

Для лучшей практики выполните проверку if, иначе ваш селектор может не быть найден в dom.

Кроме того, если querySelector("...anything...") querySelector("a") указано «нет», редактор не будет предлагать href опору, которая существует или нет. Следовательно, атрибут setAttribute имеет больше смысла.

 const URL = "http://someaddress.com?first_name="

const name = 'adiat'

const anchor = document.querySelector(".what-ever")

if(anchor){
    anchor.setAttribute("href", `${URL}${name}`);
}else{
    console.warn("element not found to replace href attribute")
}

// shorthand -> anchor?.setAttribute("href", `${URL}${name}`);

Ответ №5:

Надежным способом было бы использовать токен для замены, который я использовал {{FirstName}} . Используйте селектор атрибутов для выбора с помощью этого маркера, а затем замените этот маркер на href атрибут

 let firstNameLinks = document.querySelectorAll("a[href*='{{FirstName}}'");
let firstName = "Bob";
for(i = 0; i < firstNameLinks.length; i  ){
console.log(firstNameLinks[i].href)
  firstNameLinks[i].href  = firstNameLinks[i].href.replace("{{FirstName}}", firstName); 
} 
 <a href="https:someurl.com?firstName={{FirstName}}">A link</a>
<a href="https:someotherurl.com?aVariambe=falseamp;firstName={{FirstName}}">Another link</a>
Метки: