This question has already been answered:

I study javascript, downloaded video tutorials from torrents and hung on one homework. In the task you need to organize the menu items and remove the block "adv". I ask for help with an explanation for dummies, because in 2 days I rummaged through all the forums and reference books and did not solve this problem. [All code in the sandbox] [1] Thanks in advance! [1]: http://plnkr.co/ edit / ZRrNfxS5TJlBdDqUNpH0? p = preview

var nav = document.getElementsByTagName('nav'), menu = document.getElementsByClassName('menu'), item = document.getElementsByClassName('item'); item[2].style.backgroundColor = 'blue'; document.menu.insertBefore(item[2], item[1]); var column = document.getElementsByClassName('column'), title = document.getElementsByClassName('title'), adv = document.getElementsByClassName('adv'); document.column.removeChild(title); document.column.removeChild(adv); 
 * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 670px; background: url(../img/apple.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 180px; font-family: "Cuprum" } header { position: fixed; top:0; width: 100%; height: 80px; background-color: rgba(0,0,0, .5); padding-top: 20px; } .menu { list-style-type: none; display: flex; justify-content: space-around; align-items: flex-end; } .item { color: #fff; height: 40px; line-height: 40px; padding-right: 15px; padding-left: 15px; border: 1px solid #fff; border-radius: 8px; cursor: pointer; box-shadow: 0px 0px 20px rgba(256,256,256,.4); } .column { display: inline-block; vertical-align: top; width: 50%; margin-left: -4px; min-height: 500px; } .title { margin: 0 auto; text-align: center; font-size: 40px; color: #fff; } .adv { margin: 0 auto; height: 100px; margin-top: 50px; padding-top: 30px; width: 300px; background-color: #dff; text-align: center; border: 1px solid black; } .prompt { margin: 0 auto; height: 200px; margin-top: 50px; padding: 20px; width: 400px; background-color: rgba(0,0,0, .7); text-align: center; color: #fff; } 
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Apple</title> <link href="https://fonts.googleapis.com/css?family=Cuprum:400,700&amp;subset=cyrillic" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul class="menu"> <li class="item">Первый пункт</li> <li class="item">Третий пункт</li> <li class="item">Второй пункт</li> <li class="item">Четвертый пункт</li> </ul> </nav> </header> <div class="column"></div> <div class="column"> <div class="title" id="title"> Мы продаем только технику Apple </div> <div class="adv"> Это назойливая реклама, которую нужно удалить </div> <div class="prompt" id="prompt"> </div> </div> <script src="script.js"></script> </body> </html>

Reported as a duplicate at Grundy. javascript Jan 16 at 7:21 pm

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

1 answer 1

You actually do not understand what methods to which objects can be applied from here and a mess. The associative object / array or as they say the pseudo-array HTMLCollection does not have any methods to insertBefore, etc. You have the same column, title, dev, etc. it is a pseudo-array HTMLCollection. Learn the basics of what an object / array is, what they are, properties and methods of various objects.

 var nav = document.getElementsByTagName('nav'), menu = document.getElementsByClassName('menu'), item = document.getElementsByClassName('item'); item[2].style.backgroundColor = 'blue'; menu[0].insertBefore(item[2], item[1]); var column = document.getElementsByClassName('column'), title = document.getElementsByClassName('title'), adv = document.getElementsByClassName('adv'); column[1].removeChild(adv[0]); column[1].removeChild(title[0]) 
 * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 670px; background: url(../img/apple.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 180px; font-family: "Cuprum" } header { position: fixed; top:0; width: 100%; height: 80px; background-color: rgba(0,0,0, .5); padding-top: 20px; } .menu { list-style-type: none; display: flex; justify-content: space-around; align-items: flex-end; } .item { color: #fff; height: 40px; line-height: 40px; padding-right: 15px; padding-left: 15px; border: 1px solid #fff; border-radius: 8px; cursor: pointer; box-shadow: 0px 0px 20px rgba(256,256,256,.4); } .column { display: inline-block; vertical-align: top; width: 50%; margin-left: -4px; min-height: 500px; } .title { margin: 0 auto; text-align: center; font-size: 40px; color: #fff; } .adv { margin: 0 auto; height: 100px; margin-top: 50px; padding-top: 30px; width: 300px; background-color: #dff; text-align: center; border: 1px solid black; } .prompt { margin: 0 auto; height: 200px; margin-top: 50px; padding: 20px; width: 400px; background-color: rgba(0,0,0, .7); text-align: center; color: #fff; } 
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Apple</title> <link href="https://fonts.googleapis.com/css?family=Cuprum:400,700&amp;subset=cyrillic" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul class="menu"> <li class="item">Первый пункт</li> <li class="item">Третий пункт</li> <li class="item">Второй пункт</li> <li class="item">Четвертый пункт</li> </ul> </nav> </header> <div class="column"></div> <div class="column"> <div class="title" id="title"> Мы продаем только технику Apple </div> <div class="adv"> Это назойливая реклама, которую нужно удалить </div> <div class="prompt" id="prompt"> </div> </div> <script src="script.js"></script> </body> </html>