Всичко, което трябва да знаете за вътрешния HTML в JavaScript

JavaScript е един от най-широко използваните езици за програмиране. Също така е доста популярен заради своята гъвкавост в различните платформи. Има различни свойства в които улесняват работата ви по изграждането на динамичен уебсайт. В тази статия ще обсъдим вътрешния HTML в JavaScript в следната последователност:

• Въведение в JavaScript
• Вътрешен HTML в JavaScript
  • Подреден или неподреден списък
  • Промяна на URL адреса

Въведение в JavaScript

JavaScript се използва като език за програмиране от страна на клиента, както и език за програмиране от страна на сървъра. се използва за изпълнение както от страна на клиента, така и от страна на сървъра на всяко приложение. Възел също може да бъде посочен като Node.js на няколко места.

сортиращ масив c ++

JavaScript предоставя множество методи за няколко функционалности, които да се изпълняват с лекота. Това е, което превърна JavaScript в един от най-популярните езици за програмиране, както и се използва широко в няколко вида разработка на продукти.

Вътрешен HTML в JavaScript

Вътрешната свойството в JavaScript е една от много удобните функции и се използва широко, за да осигури по-динамичен и гъвкав аспект на създаваните уеб страници.

Ако се опитаме да обясним вътрешния HTML просто, работата, извършена от innerHTML, е просто да заредим съдържанието на страницата, без да опресняваме цялата страница. Това спестява използването на данни, както и времето зад зареждането на страницата и е доста лесно да се спечели. Това дава на потребителя много бързо и отзивчиво усещане, като по този начин прави потребителското изживяване много по-добро.

Може да звучи малко трудно, но нека се опитаме да разберем това с помощта на пример.

Пример:

 
Щракнете тук, за да промените вътрешния HTML текст.
функция myFunction () {document.getElementById ('параграф1'). innerHTML = 'Параграфът е променен!' }

Тук, в горния код, в етикета на абзаца идентификаторът на този параграф е параграф1.

Има функция наречен myfunction (), който ще бъде отменен при щракване върху текста „Щракнете тук, за да промените вътрешния HTML текст“.Когато функцията бъде отменена при щракване, функцията се изпълнява, което казва getElementById (“параграф1”), който посочва, че елементът с идентификатора като демо трябва да бъде избран.

Освен това имаме функцията innerHTML, която просто означава след щракването какво трябва да се направи. Тук в горния пример той е просто „Параграфът е променен“.

По-долу е първоначалният изход на горния код.

По-долу е промененият изход след щракването.

Вътрешен HTML с подреден или неподреден списък

По-долу е даден пример за показване на използването на innerHTML с подреден или неподреден списък.

Пример:

 
 
Здравейте
 
Здравей отново
 
 
Щракнете върху бутона по-долу, за да получите съдържанието на елемента ul.
Изпробвайте функцията helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('параграф1'). InnerHTML = x}

Тук innerHTML се задейства от бутона, дефиниран с името „Опитайте“.

c ++ оператор за обхват

Първоначалният изход на горния текст е:

Изходът след щракване върху бутона. Кликването върху бутона не води до презареждане на страницата, а вместо това се дължи на използването на innerHTML.

как да конвертирате двойно в int java -

InnerHTML за промяна на URL адреса

По-долу е даден друг пример, който показва използването на innerHTML за промяна на URL адреса при щракване върху бутона.

Пример:

  Уикипедия Промяна на функцията за връзка myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Горният пример първоначално дава връзката към уебсайта на Уикипедия, но когато кликнете върху бутона, връзката се променя в Google.

Има няколко такива операции, при които innerHTML е полезен, когато страницата не трябва да се презарежда и само част се актуализира.Това спестява време, както и по-малко усилия, които трябва да се положат за подхода.Най-голямото предимство на innerHTML е потребителското изживяване, което е подобрено с тази функция.

Вижте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уеб сайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го внедрите в Amazon Simple Storage Service (S3).

Имате въпрос към нас? Моля, споменете го в раздела за коментари на „Обединяване на низове в JavaScript“ и ние ще се свържем с вас.